При використанні таблиць 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>Дані таблиці (рядок 2, COL3)</td> </tr>
CSS</table>:
table{border-collapse:collapse; інтервал між рамками:0; border-left: 1px суцільний #888; border-top: 1px суцільний #888; Передісторія: #efefef; }
th,td{border-right:1px solid #888; border-bottom: 1px суцільний #888; наповнення: 5px 15px; }
th{font-weight:bold; Передісторія: #ccc; } |
Опубліковано 18.04.2015 22:19:21
|
|
|
|
Опубліковано 15.07.2015 01:06:57
|
Орендодавець|
Опубліковано 11.03.2021 10:51:40
|
Перегляньте підтримку
