При использовании таблиц TABLE новички в HTML-продакшне сталкиваются с тем, как изменить толщину рёбер, потому что стандартная настройка TABLE очень толстая, даже если она 1px. Поэтому существуют и другие методы создания тонких границ, и вот метод использования CSS для реализации тонких линий, который очень эффективен и совместим со всеми браузерами.
Если просто установить границу для таблицы с тонкой линией, будет сложно убедиться, что браузер совместим. Распространённой практикой является использование системы CSS2 «коллапс границы: коллапс»; границы таблицы слияния атрибутов; И задайте левую и верхнюю границы для элементов таблицы, а правую и нижнюю — для элементов th и td.
HTML:
<table> <tr> <th>Голова таблицы (строка1, COL1)</th> <th>Глава таблицы (Строка1, COL2)</th> <th>Глава таблицы (Строка1, COL3)</th> </tr> <tr> <td>Данные таблицы (Строка1, COL1)</td> <td>Таблицные данные (строка 1, COL2)</td> <td>Таблица данных (Строка 1, COL3)</td> </tr> <tr> <td>Таблица данных (Строка 2, COL1)</td> <td>Таблица данных (Строка 2, COL2)</td> <td>Таблицные данные (Row2, COL3)</td> </tr>
CSS</table>:
table{border-collapse:collapse; интервал между границами:0; край слева: 1px сплошное #888; border-top: 1px solid #888; Предыстория: #efefef; }
th,td{border-right:1px solid #888; border-bottom: 1px solid #888; наполнение: 5 пикселей 15 пикселей; }
th{font-weight:bold; Предыстория: #ccc; } |
Опубликовано 18.04.2015 22:19:21
|
|
|
|
Опубликовано 15.07.2015 1:06:57
|
Хозяин|
Опубликовано 11.03.2021 10:51:40
|
Посмотрите поддержку
