Свойство border-collapse
Определяет, должны ли границы таблицы (table) быть разделены или объединены
border-collapse: separate;Пошаговый план! Как быстро научиться создавать сайты!
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все
Значения
border-collapse: separate;
Каждая ячейка таблицы будет отображать свои собственные границы
<style>
.example-1 {
width: 100%;
border-collapse: separate;
}
.example-1 td {
border: 1px solid black;
}
</style>
<table class="example-1">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>| 1 | 2 |
border-collapse: collapse;
Соседние ячейки таблицы объединят свои границы. Ячейка, которая появляется первой в коде, «победит»: ее границы будут маскировать границы следующих ячеек
<style>
.example-2 {
width: 100%;
border-collapse: collapse;
}
.example-2 td {
border: 1px solid black;
}
</style>
<table class="example-2">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>| 1 | 2 |