إضافة جدول متجاوب لمدونة بلوجر
إضافة جدول متجاوب لمدونة بلوجر,جدول,متجاوب,هاتف ذكي ,Html,Css
بواسطة
Mohammad Ktifan
تعليقات
مشاركة
مشاركة: إضافة جدول متجاوب لمدونة بلوجر
0 دقيقة للقراءة
تغيير حجم الخط
تغيير حجم الخط
إضافة جدول متجاوب لمدونة بلوجر
كيف تضيف جدول متجاوب لمدونتك؟!
هل واجهت سؤلا كهذا ,او هل أنت بحاجة لتنسيق معلوماتك بطريقة مميزة وجميلة؟؟
احيانا قد نضطر لتنسيق المعلومات لتظهر بشكل جيد للقارئ, قد يكون هذا متعبا احيانا, لكن ليس لحد الان.
في هذه التدوينة سنقدم كيفية إضافة جول متجاوب لمدونات بلوجر.
هل واجهت سؤلا كهذا ,او هل أنت بحاجة لتنسيق معلوماتك بطريقة مميزة وجميلة؟؟
احيانا قد نضطر لتنسيق المعلومات لتظهر بشكل جيد للقارئ, قد يكون هذا متعبا احيانا, لكن ليس لحد الان.
في هذه التدوينة سنقدم كيفية إضافة جول متجاوب لمدونات بلوجر.
معاينة مباشرة للإضافة
إضافة أكواد التنسيق CSS
اتجه الى مدونتك ثم الى تبويب المظهر ومن ثم اختر تعديل HTMLوابحث عن الوسم
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>
أتنمى ان اكون قد وفقت في طرح الإضافة إن كان لديكم أي استفسارات يرجى طرحها في التعليقات
وشكرا لكم
مشاركة:
Mohammad Ktifan
مدون يسعى لتقديم محتوى مميز وجذاب للقراء بشكل عام,مهتم بكثير من الأشياء كـ بلوجر ,تصميم الويب, التصميم الجرافيكي,وأيضا الافلام والمسلسلات العالمية. مدونة الأثير فيسبوك
قد تُعجبك هذه المشاركات
تعليقات
يرجى الالتزام بسياسة التعليقات لدينا ليتم نشر تعليقك . وشكرا
تعليقات