Свойство 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

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии