Применение границ к одной ячейке таблицы при использовании border-collapse
-
12-09-2019 - |
Вопрос
У меня есть таблица, к которой применены следующие правила CSS:
table { border-collapse: collapse; }
td { border: 2px solid Gray; }
Вместо этого я хочу, чтобы некоторые ячейки имели красную рамку.
td.special { border: 2px solid Red; }
Это работает не так, как я ожидал.В FireFox 3 и IE8 это выглядит так:
(источник: контроль-v.net)
В режиме совместимости с IE7 (работает в IE8) это выглядит так:
(источник: контроль-v.net)
Я хочу, чтобы все четыре стороны <td>
быть красным.Как я могу это сделать? Тестовый пример можно найти здесь.
Решение
Невозможно использовать схлопывание границ.Однако вы можете обойти эту проблему, например, выполнив следующее:
<td class="special"><div>Two</div></td>
Затем примените такой стиль:
.special div {
border: 2px solid #f00;
margin: -2px;
}
Что (надеюсь) произойдет, так это то, что элемент div внутри td расширится наружу на 2 пикселя и покроет черную рамку красной рамкой.
Другие советы
На сайте, который я прочитал некоторое время назад, есть еще один пост, который изящно решает эту проблему, но я не смог его найти.В любом случае, подход заключался в том, чтобы сделать границу в стиле double
вместо solid
.Это работает, потому что двойной приоритет имеет более высокий приоритет, чем сплошной.На границах размером 1 или 2 пикселя разрыв между двойными линиями не отображается, поскольку линии перекрываются.
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>
Использование псевдоэлементов:
Для этого вы можете использовать псевдоэлемент.
Просто абсолютно позиционируйте псевдоэлемент родственник родителю 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>
border-collapse означает, что у td на самом деле нет некоторых границ.Вам придется найти другой способ сделать это.Предоставление таблицы фона и удаление всех границ, но оставление полей td дает красивую границу.Я считаю, что тогда установление границы приведет к созданию внутренней границы.Это сработает?