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