Свойство CSS border-collapse
Это свойство CSS используется для установки границы ячеек таблицы и указывает, имеют ли ячейки таблицы отдельную или общую границу.
Это свойство имеет два основных значения: separate и collapse. Когда для него задано значение, расстояние между ячейками может быть определено с помощью свойства border-spacing. Когда для свойства border-collapse задано значение Collapse, значение inset свойства border-style ведет себя как канавка, а начальное значение ведет себя как ridge.
Синтаксис
border-collapse: separate | collapse | initial | inherit;
Значения этого свойства CSS определяются следующим образом.
Значения свойств
separate:
это значение по умолчанию, которое отделяет границу ячейки таблицы. Используя это значение, каждая ячейка будет отображать собственную границу.
collapse:
это значение используется для сворачивания границ в единую границу. Используя это, две соседние ячейки таблицы будут иметь общую границу. Когда применяется это значение, свойство border-spacing не влияет.
Initial:
устанавливает для свойства значение по умолчанию.
inherit:
он наследует свойство от своего родительского элемента.
Теперь давайте разберемся с этим свойством CSS на нескольких примерах. В первом примере мы используем отдельное значение свойства border-collapse. Во втором примере мы используем значение Collapse свойства border-collapse.
Пример - использование отдельного значения
С этим значением мы можем использовать свойство border-spacing для установки расстояния между соседними ячейками таблицы.
<html>
<head>
<style>
table {
border: 2px solid blue;
text-align: center;
font-size: 20px;
width: 80%;
height: 50%;
}
th {
border: 5px solid red;
background-color: yellow;
}
td {
border: 5px solid violet;
background-color: cyan;
}
#t1 {
border-collapse: separate;
}
</style>
</head>
<body>
<h1>Свойство border-collapse</h1>
<h2>border-collapse: separate;</h2>
<table id="t1">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>должнасть</th>
<th>возраст</th>
</tr>
<tr>
<td>Стивен</td>
<td>Кинг</td>
<td>Писатель</td>
<td>74</td>
</tr>
<tr>
<td>Анджелина</td>
<td>Джоли</td>
<td>Актриса</td>
<td>46</td>
</tr>
<tr>
<td>Кристина</td>
<td>Свечинская</td>
<td>Хаккер</td>
<td>33</td>
</tr>
</table>
</body>
</html>
Пример — использование свойства collapse
С этим значением нельзя использовать свойстваborder-spacing и border-radius .
<html>
<head>
<style>
table {
border: 2px solid blue;
text-align: center;
font-size: 20px;
width: 80%;
height: 50%;
}
th {
border: 5px solid red;
background-color: yellow;
}
td {
border: 5px solid violet;
background-color: cyan;
}
#t1 {
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>Свойство border-collapse</h1>
<h2>border-collapse: collapse;</h2>
<table id="t1">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>должнасть</th>
<th>возраст</th>
</tr>
<tr>
<td>Стивен</td>
<td>Кинг</td>
<td>Писатель</td>
<td>74</td>
</tr>
<tr>
<td>Анджелина</td>
<td>Джоли</td>
<td>Актриса</td>
<td>46</td>
</tr>
<tr>
<td>Кристина</td>
<td>Свечинская</td>
<td>Хаккер</td>
<td>33</td>
</tr>
</table>
</body>
</html>
