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

مراجعة 08:22، 29 يوليو 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;

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

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>border-collapse</code>}}</noinclude>
-الخاصية <code>border-collapse</code> في CSS تُحدِّد إذا كان إطار الجدول منفصلًا عن إطار الخلايا (أي لكلٍ واحدٍ منها إطارٌ خاصٌ به) أو كان مدمجًا مع إطار الخلايا (أي تتشارك الخلايا المتجاورة الإطار مع بعضها بعضًا).<syntaxhighlight lang="css">
+الخاصية <code>border-collapse</code> في CSS تُحدِّد إذا كان إطار الجدول منفصلًا عن إطار الخلايا (أي لكلٍ واحدٍ منها إطارٌ خاصٌ به) أو كان مدمجًا مع إطار الخلايا (أي تتشارك الخلايا المتجاورة الإطار مع بعضها بعضًا).
-/* الكلمات المحجوزة */
-border-collapse: collapse;
-border-collapse: separate;
-/* القيم المحجوزة */
+== بطاقة الخاصية ==
-border-collapse: inherit;
-border-collapse: initial;
-border-collapse: unset;
-</syntaxhighlight>إذا كانت قيمة هذه الخاصية هي <code>separate</code>، فيمكن تعريف المسافة بين الخلايا باستخدام الخاصية <code>[[CSS/border-spacing|border-spacing]]</code>.
-وإذا كانت قيمة هذه الخاصية هي <code>collapse</code>، فإذا ضبطنا قيمة الخاصية <code>[[CSS/border-style|border-style]]</code> إلى <code>inset</code> فستسلك سلوك <code>groove</code>، وإذا ضبطناها إلى <code>outset</code> فستسلك سلوك <code>ridge</code>.
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 30: / سطر 21: @@
 |}
+<syntaxhighlight lang="css">
+/* الكلمات المحجوزة */
+border-collapse: collapse;
+border-collapse: separate;
+/* القيم المحجوزة */
+border-collapse: inherit;
+border-collapse: initial;
+border-collapse: unset;
+</syntaxhighlight>إذا كانت قيمة هذه الخاصية هي <code>separate</code>، فيمكن تعريف المسافة بين الخلايا باستخدام الخاصية <code>[[CSS/border-spacing|border-spacing]]</code>.
+وإذا كانت قيمة هذه الخاصية هي <code>collapse</code>، فإذا ضبطنا قيمة الخاصية <code>[[CSS/border-style|border-style]]</code> إلى <code>inset</code> فستسلك سلوك <code>groove</code>، وإذا ضبطناها إلى <code>outset</code> فستسلك سلوك <code>ridge</code>.
 == أمثلة ==
@@ سطر 106: / سطر 110: @@
 الخاصية <code>border-collapse</code> تقبل قيمةً واحدة من الكلمتين المحجوزتين التاليتين.
-=== القيمة <code>separate</code> ===
+=== <code>separate</code> ===
 إطار الجدول منفصلٌ عن إطار الخلايا (أي لكلٍ واحدٍ منها إطارٌ خاصٌ به).
-=== القيمة <code>collapse</code> ===
+===  <code>collapse</code> ===
 إطار الجدول مدمجٌ مع إطار الخلايا (أي تتشارك الخلايا المتجاورة الإطار مع بعضها بعضًا).
 === البنية الرسمية ===