إضافة جدول متجاوب لمدونة بلوجر

---- your ads -----

إضافة جدول متجاوب لمدونة بلوجر

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

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

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

إضافة أكواد التنسيق 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>

أتنمى ان اكون قد وفقت في طرح الإضافة إن كان لديكم أي استفسارات يرجى طرحها في التعليقات

وشكرا لكم

---- your ads -----

CSS

HTML

إضافات بلوجر

قالب سكويز

إضافة جدول متجاوب لمدونة بلوجر