تطبيق الحدود إلى خلية جدول واحدة عند استخدام الانهيار الحدودية

Question

لدي جدول مع قواعد CSS التالية المطبقة:

table { border-collapse: collapse; }
td { border: 2px solid Gray; }

أريد أن يكون لدى بعض الخلايا حد أحمر، بدلا من ذلك.

td.special { border: 2px solid Red; }

هذا لا يعمل كما أتوقع. في فايرفوكس 3 و IE8 يبدو هذا:

_{(مصدر: السيطرة-v.net.)}

في وضع التوافق IE7 (يعمل في IE8) يبدو هذا:

_{(مصدر: السيطرة-v.net.)}

أريد كل أربعة جوانب <td> أن تكون حمراء. كيف يمكنني أن أفعل هذا؟ يمكن العثور على حالة الاختبار هنا.

Answer 1

لن تكون ممكنا باستخدام انهيار الحدود. هل يمكن أن تعمل حول المشكلة إلى حد ما، على سبيل المثال عن طريق القيام بذلك:

<td class="special"><div>Two</div></td>

ثم تطبيق نمط مثل هذا:

.special div {
    border: 2px solid #f00;
    margin: -2px;
}

ما سيحدث (نأمل) هو DIV داخل TD سيتوسع إلى الخارج من قبل 2 بكسل وتغطية الحدود السوداء مع حد أحمر.

Answer 2

هناك منشور آخر على الموقع قرأته منذ ذلك الوقت أن يحل هذه المشكلة بأمان، لكنني لم أستطع العثور عليه. على أي حال، كان النهج هو جعل نمط الحدود double بدلا من solid. وبعد هذا يعمل لأن مزدوج له أولوية أعلى من الصلبة. على حدود 1px أو 2px، لا تظهر الفجوة بين الخطوط المزدوجة لأن الخطوط تتداخل.

table { border-collapse: collapse; }
td { border: 2px solid Gray; }
td.special { border: 2px double Red; }

<table>
    <tr><td>a</td><td>a</td><td>a</td></tr>
    <tr><td>a</td><td class="special">a</td><td>a</td></tr>
    <tr><td>a</td><td>a</td><td>a</td></tr>
</table>

Answer 3

باستخدام عناصر الزائفة:

يمكنك استخدام عنصر الزائفة لتحقيق ذلك.

فقط موقف فقط عنصر الزائفة نسبيا إلى الوالد td جزء. اجعل العنصر الزائف ملء الأبعاد بأكملها من العنصر الأصل، ثم أضف الحدود إليه.

مثال هنا

table {
    border-collapse: collapse;
}
table td {
    position: relative;
    border: 1px solid #000;
    padding: 2px;
}
table td.selected:after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    border: 2px solid red;
}

<table>
    <tr>
        <td>One</td>
        <td>One</td>
        <td>One</td>
    </tr>
    <tr>
        <td>Two</td>
        <td class="selected">Two</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>Three</td>
        <td>Three</td>
        <td>Three</td>
    </tr>
</table>

Answer 4

انهيار الحدود يعني أن TD لا تملك بالفعل بعض حدودها. عليك أن تجد طريقة أخرى للقيام بذلك. إعطاء الجدول خلفية وأخذ كل الحدود ولكن ترك هوامش TD يعطي حدود لطيفة. ثم وضع الحدود من شأنه أن يعطي حدود داخلية، وأعتقد. هل هذا يعمل؟