CSS/border-collapse

الخاصية border-collapse في CSS تُحدِّد إذا كان إطار الجدول منفصلًا عن إطار الخلايا (أي لكلٍ واحدٍ منها إطارٌ خاصٌ به) أو كان مدمجًا مع إطار الخلايا (أي تتشارك الخلايا المتجاورة الإطار مع بعضها بعضًا).

/* الكلمات المحجوزة */
border-collapse: collapse;
border-collapse: separate;

/* القيم المحجوزة */
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;

إذا كانت قيمة هذه الخاصية هي separate، فيمكن تعريف المسافة بين الخلايا باستخدام الخاصية border-spacing.

وإذا كانت قيمة هذه الخاصية هي collapse، فإذا ضبطنا قيمة الخاصية border-style إلى inset فستسلك سلوك groove، وإذا ضبطناها إلى outset فستسلك سلوك ridge.

القيمة الابتدائية	separate
تُطبَّق على	عناصر table و inline-table.
قابلة للوراثة	نعم
قابلة للحركة	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

سنستخدم في المثال الآتي جدولًا <table> وسنضبط له ولجميع خلاياه إطارات border، وسنستخدم الخاصية border-collapse مع القيمتين separate و collapse لنرى ما أثرها:

<table class="separate">
  <caption><code>border-collapse: separate</code></caption>
  <tbody>
    <tr><th>Browser</th> <th>Layout Engine</th></tr>
    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
  </tbody>
</table>

<table class="collapse">
  <caption><code>border-collapse: collapse</code></caption>
  <tbody>
    <tr><th>Browser</th> <th>Layout Engine</th></tr>
    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
  </tbody>
</table>

شيفرة CSS:

.collapse {
  border-collapse: collapse;
}

.separate {
  border-collapse: separate;
}

table {
  display: inline-table;
  margin: 1em;
  border: dashed 5px;
}

table th,
table td {
  border: solid 3px;
}

.fx { border-color: orange blue; }
.gk { border-color: black red; }
.ed { border-color: blue gold; }
.tr { border-color: aqua; }
.sa { border-color: silver blue; }
.wk { border-color: gold blue; }
.ch { border-color: red yellow green blue; }
.bk { border-color: navy blue teal aqua; }
.op { border-color: red; }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	5	4	1.2

البنية العامة

الخاصية border-collapse تقبل قيمةً واحدة من الكلمتين المحجوزتين التاليتين.

القيمة separate

إطار الجدول منفصلٌ عن إطار الخلايا (أي لكلٍ واحدٍ منها إطارٌ خاصٌ به).

القيمة collapse

إطار الجدول مدمجٌ مع إطار الخلايا (أي تتشارك الخلايا المتجاورة الإطار مع بعضها بعضًا).

البنية الرسمية

border-collapse: collapse | separate;

مصادر ومواصفات

• مواصفة ‎CSS Level 2 (Revision 1)‎.