Свойство border-collapse
Описание
Определяет, должны ли границы таблицы быть разделены или объединены.
Синтаксис
border-collapse: collapse | separate;
Значение | Описание |
collapse | Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing. |
separate | Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#result > table {
width: 100%;
border: 2px solid black;
border-collapse: separate;
}
#result > table > tr > th {
text-align: left;
background: #ccc;
padding: 5px;
border: 1px solid black;
}
#result > table > tr > td {
padding: 5px;
border: 1px solid black;
}
</style>
<div id='result'>
<table>
<tr>
<th></th>
<th>Геометрия</th>
<th>Информатика</th>
<th>Алгебра</th>
</tr>
<tr>
<td class='t5'>Александр</td>
<td class='t5'>4</td>
<td class='t5'>2</td>
<td class='t5'>5</td>
</tr> <tr>
<td class='t5'>Кирилл</td>
<td class='t5'>5</td>
<td class='t5'>5</td>
<td class='t5'>5</td>
</tr>
<tr>
<td class='t5'>Матвей</td>
<td class='t5'>3</td>
<td class='t5'>5</td>
<td class='t5'>5</td>
</tr>
</table></div>
</body>
</html>
Геометрия | Информатика | Алгебра | |
---|---|---|---|
Александр | 4 | 2 | 5 |
Кирилл | 5 | 5 | 5 |
Матвей | 3 | 5 | 5 |
Читайте также
Свойство border-spacing
Задаёт расстояние между границами ячеек в таблице. Не работает в случае, когда для таблицы устано...
Свойство box-shadow
Добавляет тень к элементу.<br>Разрешено использовать несколько теней, указывая их через зап...
Правило @charset
Команда @charset применяется для задания кодировки внешнего CSS-файла. Это имеет значение в том с...
Функция repeating-radial-gradient()
По своему действию похож на радиальный градиент, который делается функцией <span class=...
Свойство white-space
Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любо...