طريقة إنشاء جدول متجاوب احترافي داخل مشاركات بلوجر

مرحبا بكم في موقع technomee، في بعض الأحيان عندما نريد نشر مشاركة داخل بلوجر، نحتاج إلى استخدام جدول لعرض البيانات ولجعلها تبدو بتصميم جميل ومريح للمستخدم. لذلك في هذا الموضوع سوف أشارك معكم طريقة إنشاء جدول متجاوب احترافي داخل مشاركات بلوجر. هذا الجدول مثالي لأي استخدام قد ترغب به مثلا عرض مميزات منتج معين او إضافة بيانات تخص العمل وما إلى ذلك. 

/* CSS Table */
table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;font-size:16px;padding:10px;text-align:right;vertical-align:top;}
.post-body table tr th {border:1px solid $(body.link.color);font-weight:bold;color:#fff;padding:10px 10px;text-align:right;vertical-align:top;font-size:16px}
.post-body table th {background:#7babed}
.post-body table.tr-caption-container {border:1px solid #f1f1f1;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{vertical-align:top;text-align:right;font-size:13px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}
.post-body td a{display:inline-block}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[target="_blank"]:after {margin-right:5px;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
table {max-width:100%;width:100%}
table.section-columns td.first.columns-cell{border-right:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%} table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}

اذا كنت ترغب بتغيير لون خلفية عنوان الجدول، قم بتغيير كود اللون التالي #7babed بأي لون آخر ترغب به.

<table cellpadding="0" cellspacing="0" style="text-align:right;">
<tbody>
<tr><th>ميزات القالب</th> <th>تحقق</th></tr>
<tr><td>technomee</td><td>تجربة </td></tr>
<tr><td>technomee</td> <td>تجربة </td></tr>
<tr><td>technomee</td><td>تجربة</td></tr>
<tr><td>technomee</td><td>تجربة</td></tr>
</tbody>
</table>

معاينة الجدول

ميزات القالب	تحقق
technomee	تجربة
technomee	تجربة
technomee	تجربة
technomee	تجربة