CSS :: Свойство border-spacing
css-свойство border-spacing (от англ. border spacing – расстояние между границами) используется для установки расстояния между границами ячеек таблицы, когда значение свойства border-collapse установлено в separate.
Характеристики
Синтаксис
border-spacing: <интервал> [<интервал>]
Значения
В качестве интервала принимаются любые единицы измерения (смотреть), используемые в CSS. При этом проценты использовать не разрешается.
Если используется одно значение интервала, то оно задает расстояние между границами ячеек как по горизонтали, так и по вертикали. Также разрешается использовать через пробел два значения: первое будет задавать расстояние между границами ячеек по горизонтали, а второе - по вертикали.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/CSS2/tables.html#separated-borders
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/border-spacing
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> table{ width: 50%; margin-top: 3em; border: 1px solid green; border-collapse: separate; } td{ border: 1px solid green; } .spacing_1{ border-spacing: 5px; } .spacing_2{ border-spacing: 0.8em; } </style> </head> <body> <table class="spacing_1"> <caption>Интервал между границами 5px</caption> <tr> <td>Ячейка 1.1</td><td>Ячейка 1.2</td> </tr> <tr> <td>Ячейка 2.1</td><td>Ячейка 2.2</td> </tr> </table> <table class="spacing_2"> <caption>Интервал между границами 0.8em</caption> <tr> <td>Ячейка 1.1</td><td>Ячейка 1.2</td> </tr> <tr> <td>Ячейка 2.1</td><td>Ячейка 2.2</td> </tr> </table> </body> </html>
Пример №1