Способ отображения границы вокруг ячеек таблицы.
Свойство border-collapse
border-collapse: separate;
| Первая ячейка первой строки | Вторая ячейка первой строки |
| Первая ячейка второй строки | Вторая ячейка второй строки |
border-collapse: collapse;
| Первая ячейка первой строки | Вторая ячейка первой строки |
| Первая ячейка второй строки | Вторая ячейка второй строки |
Исходный код этого примера:
<style>
table {
border: 1px solid #000; /* Граница вокруг таблицы */
border-spacing: 0; /* Расстояние между границами ячеек */
}
table.a1 {
border-collapse: separate; /* Отображать все линии */
}
table.a2 {
border-collapse: collapse; /* Отображать только одинарные линии */
}
td {
padding: 5px; /* Поля вокруг содержимого ячеек */
border: 1px solid #000; /* Границы вокруг ячеек */
}
</style>
<h3>border-collapse: separate;</h3>
<table class="a1">
<tr><td>Первая ячейка первой строки</td><td>Вторая ячейка первой строки</td></tr>
<tr><td>Первая ячейка второй строки</td><td>Вторая ячейка второй строки</td></tr>
</table>
<h3>border-collapse: collapse;</h3>
<table class="a2">
<tr><td>Первая ячейка первой строки</td><td>Вторая ячейка первой строки</td></tr>
<tr><td>Первая ячейка второй строки</td><td>Вторая ячейка второй строки</td></tr>
</table>
.
Прокомментировать/Отблагодарить