CSS/border-collapse

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

بطاقة الخاصية

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

/* الكلمات المحجوزة */
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.

أمثلة

سنستخدم في المثال الآتي جدولًا <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;

انظر أيضًا

• صفحة الخاصية border والخاصيات التي تضبطها هذه الخاصية وهي: border-width، و border-style، و border-color.
• صفحة الخاصيات التي تضبط أجزاءً من الإطار: الإطار العلوي border-top، والإطاري السفلي border-bottom، والإطار اليميني border-right، والإطار اليساريborder-left.
• صفحة الخاصية border-spacing التي تُحدِّد المسافة بين إطارات خلايا الجداول المتجاورة.

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

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