الفرق بين المراجعتين لصفحة: «CSS/border-collapse»

مراجعة 08:07، 12 أغسطس 2018

الخاصية 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.

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

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

@@ سطر 121: / سطر 121: @@
 == انظر أيضًا ==
 * صفحة الخاصية <code>[[CSS/border|border]]</code> الخاصيات التي تضبطها هذه الخاصية وهي: <code>[[CSS/border-width|border-width]]</code>، و <code>[[CSS/border-style|border-style]]</code>، و <code>[[CSS/border-color|border-color]]</code>.
+* صفحة الخاصيات التي تضبط أجزاءً من الإطار: الإطار العلوي <code>[[CSS/border-top|border-top]]</code>، والإطاري السفلي <code>[[CSS/border-bottom|border-bottom]]</code>، والإطار اليميني <code>[[CSS/border-right|border-right]]</code>، والإطار اليساري<code>[[CSS/border-left|border-left]]</code>.
 == مصادر ومواصفات ==