Применение границ к одной ячейке таблицы при использовании пограничного краха

У меня есть таблица со следующими правилами CSS:

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

Вместо этого я хочу, чтобы определенные ячейки имели красную рамку.

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

Это не работает, как я ожидал. В FireFox 3 и IE8 это выглядит так:

_{(источник: control-v.net)}

В режиме совместимости IE7 (работает в IE8) это выглядит так:

_{(источник: control-v.net)}

Я хочу, чтобы все четыре стороны <td> были красными. Как я могу это сделать? Тестовый пример можно найти здесь.

Ответ 1

Невозможно использовать пограничный обвал. Вы можете немного обойти эту проблему, например, например:

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

Затем применяем такой стиль:

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

Что (надеюсь) произойдет, так как div внутри td будет расширяться наружу на 2 пикселя и покрыть черную границу красной рамкой.

Ответ 2

Там еще одна публикация на сайте, которую я прочитал некоторое время назад, которая изящно решает эту проблему, но я не мог ее найти. Во всяком случае, подход заключался в том, чтобы сделать double в стиле border solid. Это работает, потому что double имеет более высокий приоритет, чем твердый. На границах 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>

Ответ 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>

Ответ 4

border-collapse означает, что td фактически не имеет некоторых своих границ. Вам нужно будет найти другой способ сделать это. Предоставление таблицы фона и удаление всех границ, но оставляя поля td дает хорошую границу. Полагаю, что установка границы даст внутреннюю границу. Будет ли это работать?