Применение границ к одной ячейке таблицы при использовании border-collapse - PullRequest
Новая
       46

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

16 голосов
/ 07 августа 2009

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

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

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

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

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

IE8/FF3 rendering
(источник: control-v.net )

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

IE7 Compatibility mode rendering
(источник: control-v.net )

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

Ответы [ 4 ]

19 голосов
/ 09 октября 2014

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

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

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

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

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

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

5 голосов
/ 04 февраля 2015

Использование псевдоэлементов:

Для этого можно использовать псевдоэлемент.

Просто поместите псевдоэлемент относительно относительно родительского элемента 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>
2 голосов
/ 07 августа 2009

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

...