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

إضافة جدول متجاوب لمدونة بلوجر,جدول,متجاوب,هاتف ذكي ,Html,Css

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

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

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

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

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

ذات صلة


عـرض التعليقات
اخفاء التعليقات

يسعدنا تفاعلكم معنا,نرجو احترام الآداب العامة وعم نشر اي روابط اشهارية.
لإضافة كود قم بتحويله اولا بمحول الاكواد

إخلاء المسؤولية محول الأكواد ابلاغ عن رابط لايعمل