شرح صفوف ومحتوى الفقرة
عند إضافة إطار عبر border: 1px solid #c4b5fd; إلى الجدول وخلاياه، يعرض المتصفح في البداية خطوطاً مزدوجة حول كل خلية لأن الوضع الأولي هو border-collapse: separate;. وفي هذا الوضع المنفصل يمكنك التحكم في مسافة الفراغ بين صناديق الخلايا عبر border-spacing: 8px; وإخفاء إطارات الخلايا الفارغة عبر empty-cells: hide;.
أما لبناء جداول احترافية نظيفة، فاضبط خاصية border-collapse: collapse; على عنصر الجدول لدمج الحدود المتجاورة في خط شبكي واحد حاد بسماكة 1px؛ وعند الدمج يتجاهل المتصفح خاصيتي التباعد والخلايا الفارغة لاشتراك الخلايا في جدران موحدة.
CSS
.data-table {
width: 100%;
border-collapse: collapse;
}
.cell-head, .cell-data {
border: 1px solid #c4b5fd;
padding: 10px;
}