English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
خصائص border-collapse CSS تحدد ما إذا كانت حواف خلايا الجدول تدمج في حاجز واحد أو تُقسم بشكل طبيعي.
هناك نموذجان مختلفان يمكن تطبيقها على حواف خلايا الجداول في CSS.
في هذا النموذج، كل خلية جدول لها حاجز منفصل.
border-spacingالمسافة بين الحواف المحيطة بالخلايا المجاورة المحددة من قبل الخاصية.
ملاحظة:في نموذج الحاجز المنفصل، يمكن فقط أن تكون الخلايا (والجدول نفسه) مغطاة بالحاجز؛ الأعمدة، الأسطر، مجموعات الأعمدة ومجموعات الأسطر لا يمكن أن تكون.
في نموذج الحاجز المدمج، تشترك الخلايا المجاورة في الحاجز.
ملاحظة:في نموذج الحاجز المدمج، يمكن تحديد حاجز جزء أو كامل الخلايا، الأعمدة، مجموعات الأعمدة، الأسطر ومجموعات الأسطر.
خصائص border-collapse تختار نموذج حاجز جدول. القيمة separate تختار نموذج حاجز منفصل. القيمة collapse تختار نموذج الحاجز المدمج.
جدول التالي يوضح شرح الاستخدام و تاريخ الإصدارات لهذه الخاصية، بالإضافة إلى جملة استخدام الخاصية في سكربتات JavaScript.
| القيمة الافتراضية: | التمييز |
|---|---|
| يُستخدم ل: | هذاالجدولو عناصر القائمة العمودية |
| الوراثة: | نعم |
| يمكن تحويلها إلى رسوم متحركة: | لاانظر إلى خصائص الرسوم المتحركة。 |
| الإصدار: | CSS 2、3 |
| جملة JavaScript: | object object.style.borderCollapse="collapse" |
جملة النص الخاصية هي:
border-collapse: separate | collapse | initial | inherit
في المثال التالي، يتم عرض كيفية استخدام خاصية border-collapse.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}جرب لمعرفة‹/›جدول التالي يصف قيم الخاصية.
| القيمة | الوصف |
|---|---|
| separate | اختيار نموذج الجدار المفكك. هذا هو القيمة الافتراضية. |
| collapse | اختيار نموذج الجدار المنكسر.border-spacingوempty-cellsسيتم تجاهل الخاصية. |
| initial | إعداد الخاصية إلى قيمتها الافتراضية. |
| inherit | إذا تم تحديد، فإن العناصر المرتبطة تأخذ قيمة الخاصية border-collapse للعنصر الأم. |
تطابق متصفحات border-collapse الخاصية، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفحات التي تدعم الخاصية؛ جميع المتصفحات الشائعة يدعمون الخاصية.
|
تحذير: استخدامborder-collapseعند تعيين الخاصية، استخدم دائمًا القيمة الصحيحة<!DOCTYPE>، وإلا قد يحدث نتائج غير متوقعة.
انظر إلى الدليل:CSS Border،CSS3 Border。
خصائص المتعلقة بالجدول:border-spacing،empty-cells،table-layout。