Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Способ отображения границы вокруг ячеек таблицы.
Свойство 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>
.
Прокомментировать/Отблагодарить