إليك طريقة بسيطة جدًا لتحديد أحجام أعمدة جدولك ببضعة أسطر من CSS بدلًا من إعطاء قيم مضمّنة لكل خلية. تجعل هذه الطريقة إنشاء الجداول المتجاوبة أسهل بكثير.
عرض توضيحي: هكذا يبدو الجدول
| 35% | 15% | 5% | 35% | 10% |
| A | B | C | D | E |
| A | B | C | D | E |
| A | B | C | D | E |
CSS
انسخ الشيفرة أدناه والصقها في ملف CSS الخاص بك.
table tr td { padding: 20px; }
table td:nth-child(1) { width: 35%; }
table td:nth-child(2) { width: 15%; }
table td:nth-child(3) { width: 5%; }
table td:nth-child(4) { width: 35%; }
table td:nth-child(5) { width: 10%; }HTML
انسخ الشيفرة أدناه والصقها في مستند HTML الخاص بك.
<table class="table" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>35%</td>
<td>15%</td>
<td>5%</td>
<td>35%</td>
<td>10%</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
</table>يمكنك نسخ شيفرتي CSS وHTML إلى ملفك وتعديلهما كما تشاء!
ملاحظة: تستهدف هذه المحددات كل جدول في الصفحة. ولحصرها في جدول واحد، ضع اسم صنف قبل كل محدد، مثل .my-table td:nth-child(1). كما أن الحشو والمحتوى يحددان حدًا أدنى للعرض، لذا قد تظهر الأعمدة الضيقة جدًا (مثل عمود 5%) أعرض من القيمة المحددة.