الأثير

كيف تضيف جدول متجاوب لمدونتك؟!
هل واجهت سؤلا كهذا ,او هل أنت بحاجة لتنسيق معلوماتك بطريقة مميزة وجميلة؟؟
احيانا قد نضطر لتنسيق المعلومات لتظهر بشكل جيد للقارئ, قد يكون هذا متعبا احيانا, لكن ليس لحد الان.
في هذه التدوينة سنقدم كيفية إضافة جول متجاوب لمدونات بلوجر.

معاينة مباشرة للإضافة

معاينة الإضافة

إضافة أكواد التنسيق CSS 

اتجه الى مدونتك ثم الى تبويب المظهر ومن ثم اختر تعديل HTML
وابحث عن الوسم ]]></b:skin> أو </style> والصق الكود التالي أعلاه/فوقه

 table {
  background-color: transparent;
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
table img {
  width: 100%;
  height: auto;
}
table.tr-caption-container {
  padding: 0;
  border: none;
}
table td.tr-caption {
  font-size: 12px;
  font-style: italic;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}
th {
  text-align: right;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.table a {
  text-decoration: none !important;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
}
.table > thead > tr > th {
  background-color: #3498db;
  color: #fff;
  vertical-align: bottom;
}
.table > thead > tr > th a {
  color: #fff !important;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  display: table-cell;
  float: none;
}
.table-responsive {
  min-height: 0.01%;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
}
 

إضافة أكواد HTML و التعامل مع الإضافة

عندما تريد إضافة جول الى اي تدوينة تنتقل الى وضع HTML وتقوم بوضع الكود التالي بالمكان الذي تريده ان يكون
وتغيير الكلمات بما تريده

 <div class="table-responsive">
<table class="table">
<thead>
<tr>
    <th>التفاصيل</th>
    <th>المعلومة</th>
  </tr>
</thead>
<tbody>
<tr>
    <td>مثال</td>
    <td>مثال</td> 
  </tr>
<tr>
    <td>مثال</td>
    <td>مثال</td>
  </tr>
<tr>
    <td>مثال</td>
    <td>مثال</td>
  </tr>
</tbody>
</table>
</div>