Свойство border-spacing
Описание
Задаёт расстояние между границами ячеек в таблице. Не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse.
Синтаксис
border-spacing: размер;Пример
<!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-spacing: 7px 15px;
}
#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>Александр</td>
<td>4</td>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>Кирилл</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>Матвей</td>
<td>3</td>
<td>5</td>
<td>5</td>
</tr>
</table>
</div>
</body>
</html>| Геометрия | Информатика | Алгебра | |
|---|---|---|---|
| Александр | 4 | 2 | 5 |
| Кирилл | 5 | 5 | 5 |
| Матвей | 3 | 5 | 5 |
Читайте также
Правило @font-face
Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на...
Свойство box-sizing
Применяется для изменения алгоритма расчёта ширины и высоты элемента.
Свойство word-break
Указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область.
Свойство text-decoration-style
Устанавливает стиль декоративной линии, которая добавляется к тексту через свойство text-decorati...
Применяется к дочернему элементу указанного типа
Применяет стилевые правила к элементу input, у которого не задан атрибут required, он позволяет в...