border-collapse | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | separate |
|---|---|
| Наследуется | Нет |
| Применяется | К тегу <table> или к элементам, у которых значение display установлено как table или inline-table |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse |
Версии CSS
Описание
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
| а | б |
Рис. 1. Вид таблицы при использовании свойства border-collapse
Синтаксис
border-collapse: collapse | separate | inherit
Значения
- collapse
- Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing.
- separate
- Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-collapse</title>
<style>
table {
width: 100%; /* Ширина таблицы */
border: 4px double black; /* Рамка вокруг таблицы */
border-collapse: collapse; /* Отображать только одинарные линии */
}
th {
text-align: left; /* Выравнивание по левому краю */
background: #ccc; /* Цвет фона ячеек */
padding: 5px; /* Поля вокруг содержимого ячеек */
border: 1px solid black; /* Граница вокруг ячеек */
}
td {
padding: 5px; /* Поля вокруг содержимого ячеек */
border: 1px solid black; /* Граница вокруг ячеек */
}
</style>
</head>
<body>
<table>
<tr>
<th> </th><th>2013</th>
<th>2014</th><th>2015</th>
</tr>
<tr>
<td>Нефть</td><td>43</td>
<td>51</td><td>79</td>
</tr>
<tr>
<td>Золото</td><td>29</td>
<td>34</td><td>48</td>
</tr>
<tr>
<td>Дерево</td><td>38</td>
<td>57</td><td>36</td>
</tr>
</table>
</body>
</html> Результат данного примера показан на рис. 2.
Рис. 2. Вид таблицы при использовании свойства border-collapse
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. В IE6 и IE7 не отменяется действие атрибута cellspacing.
как работать с полями, границами и свойством z-index
Ещё несколько лет назад фронтенд-разработчики активно использовали табличную вёрстку для создания веб-страниц. Сегодня появились более удобные инструменты, а тег <table> теперь применяется по прямому назначению: для создания таблиц с данными. Однако оформлять таблицы по-прежнему не так просто. Некоторые CSS-свойства, например, border-radius, z-index, не работают с элементами таблиц <tbody>, <thead>, <tr>. Статья поможет обойти эти ограничения.
Структура таблицы
Эталонный вариант таблицы
Иллюстрация выше показывает, как можно оформить таблицу с помощью CSS. Первый ряд выступает в качестве заголовка, а разделы таблицы обозначены подзаголовками.
<table>
<thead>
<tr>
<th>MO</th>
<th>TU</th>
<th>WE</th>
<th>TH</th>
<th>FR</th>
<th>SA</th>
<th>SU</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="7">
Working hours
</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="7">
Workout
</th>
</tr>
<tr>
<td>0.5</td>
<td>0.5</td>
<td>0.5</td>
<td>1</td>
<td>0.5</td>
<td>2</td>
<td>0</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="7">
Total
</th>
</tr>
<tr>
<td>8.5</td>
<td>8.5</td>
<td>9.5</td>
<td>10</td>
<td>5.5</td>
<td>2</td>
<td>0</td>
</tr>
</tbody>
</table>
Выше представлена структура таблицы в HTML. В <tbody>, каждая из которых имеет собственный подзаголовок.
Что не так с
margin и как оформить отступы для элементов таблицыКак видно на иллюстрации в начале статьи, между главным заголовком и секцией <tbody>, а также между остальными секциями <tbody>, есть отступы. Можно подумать, что они определяются свойствами margin-top для <tbody>, но это не так.
Если попытаться использовать margin-top для оформления <tbody>, <thead> или <tr>, добиться отступов не удастся. Чтобы margin заработали, можно изменить свойство display, которое менять опасно, так как изменения могут нарушить форматирование таблицы. Поэтому лучше воспользоваться альтернативными решениями, которые описаны ниже.
Свойство
borderСамый простой способ получить отступы без использования margin — применить к <tbody> border-top: 1 em.
// Это нужно, чтобы работал border-top
.table {
border-collapse: collapse; // 1
border-spacing: 0;
}
.section {
border-top: 1em solid transparent;
}
Все секции <tbody>, у которых должны быть отступы, имеют класс .section. Чтобы свойство border-top сработало, необходимо применить к таблице border-collapse: collapse.
Псевдоэлементы
::before и ::afterПсевдоэлементы ::before и ::after — ещё один способ добавить отступы для элементов таблицы.
.section::before {
height: 1em;
display: table-row;
content: '';
}
В данном случае создаётся пустой ряд, который обеспечивает визуальный отступ между секциями <tbody>.
Вы можете использовать для оформления отступов как псевдоэлементы, так и свойство border.
Как применить к элементам таблицы
border-radius<tbody> границы и применить к ним border-radius. Напрямую это сделать невозможно — border и border-radius не работают с <tbody>.// 1. Приходится использовать свойство box-shadow
// border-radius не работает с <tbody>.
.section-step {
border-radius: 0.25em; // 1
box-shadow: 0 0 0 1px #ccc; // 1
}
Пример выше показывает, как с помощью box-shadow добиться практически такого же результата, как с помощью border при работе с нетабличными элементами.
Как оформлять ячейки таблицы
Внешний вид текущей таблицы (см. иллюстрацию ниже) отличается от эталонного варианта, который представлен в начале статьи.
Нужны марджины, а не паддинги
После добавления границ можно заметить, что полученные отступы работают не как «марджины», а как «паддинги». Это можно изменить, если работать с границами ячеек и использовать селекторы :first-child и :last-child.
.section-step th, .section-step td { border: 0 solid #ccc; } .section-step th:first-child, .section-step td:first-child { border-left-width: 1px; } .section-step th:last-child, .section-step td:last-child { border-right-width: 1px; } .section-step tr:first-child th, .section-step tr:first-child td { border-top-width: 1px; } .section-step tr:first-child th:first-child, .section-step tr:first-child td:first-child { border-top-left-radius: 0.25em; } .section-step tr:first-child th:last-child, .section-step tr:first-child td:last-child { border-top-right-radius: 0.25em; } .section-step tr:last-child th, .section-step tr:last-child td { border-bottom-width: 1px; } .section-step tr:last-child th:first-child, .section-step tr:last-child td:first-child { border-bottom-left-radius: 0.25em; } .section-step tr:last-child th:last-child, .section-step tr:last-child td:last-child { border-bottom-right-radius: 0.25em; }
В примере выше стили применяются к соответствующим элементам th и td ячеек таблицы. К ячейкам, которые находятся в углах таблицы, применяется border-radius. Все ячейки, которые находятся по краям таблицы, имеют границы. Селекторы :first-child и :last-child позволяют обращаться к нужным ячейкам.
Как применять
z-index к элементам таблицыПроблемы с box-shadow
На первой иллюстрации в статье видно, что свойство box-shadow применяется к подзаголовкам, поэтому тени попадают на следующие ниже ряды таблицы. Если попробовать прямо применить box-shadow к соответствующему элементу, тень в рядах не появится.
В обычной ситуации можно использовать для решения таких проблем z-index. Но с таблицами всё сложнее: z-index не работает с <tbody>. Проблема решается, если вы знаете, как работать с контекстом наложения. Если применить к элементу position: relative и z-index, появляется новый контекст наложения. Также эту задачу можно решить с помощью transform: translate (0, 0).
Заключение
Чтобы сделать таблицы визуально привлекательными, приходится использовать неочевидные трюки CSS. Но этим и хороши CSS — с их помощью можно решить практически любую задачу по оформлению веб-элементов.
При работе с таблицами возникает соблазн переопределить свойство display. Но это приведёт к дополнительным сложностям: придётся вручную определять ширину ячеек, чтобы таблица нормально отображалась. Поэтому удобнее пользоваться предложенными выше трюками, которые позволяют оформлять таблицы элегантно и без лишнего кода.
Адаптированный перевод статьи Styling HTML Tables: How to Apply Margins, Borders and z-index on Table Elements by Markus Oberlehner. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».
CSS свойство border-radius | назначение, допустимые значения, примеры
Свойство border-radius — сокращенный способ задать свойства границы border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, позволяет задать одновременно радиус скруглений всех углов элемента.
Допустимые значения
- — точное значение радиуса (не может быть отрицательным)
- — значение радиуса в процентах.
Есть возможность задать несколько радиусов для разных углов. Если задано два радиуса, первый означает радиус скругления левого верхнего и правого нижнего углов, а второй — правого верхнего и левого нижнего углов. Если задано три числа, тогда первое — левый верхний угол, второе — правый верхний и левый нижний углы, а третье — правый нижний угол.
Можно задать эллиптические радиусы используя слеш. Значение до слеша — радиусы по оси х, а после слеша — радиусы по оси у.
Если значения указаны в процентах, то значение радиуса по оси х отсчитывается в процентах от ширины блока, а значение радиуса по оси у — от высоты блока.
| Значение по умолчанию | 0 |
|---|---|
| Применимо | ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’. |
| Наследование | нет |
| Версия CSS | CSS 3 |
| Поддерживается браузерами |
Пример
.block {
border-radius: 10px/20%;
border: 1px solid #000;
}
Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— .block { width: 80%; height: 50%; background: #3490fb; color: #000; border: 2px solid #f00; border-radius: 40px 30px 60px / 20px 10%; } —> </style> </head> <body> <div> блок со скругленными уголками (работает в Opera 10.5 и выше). </div> </body> </html>Сделай код и жми тутРезультат:
большой полигонЗаметки
Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.
Safari 3 и выше и Chrome 1 и выше поддерживают аналогичное свойство -webkit-border-radius, а Firefox 1.0 и выше -moz-border-radius, но эти свойства не полностью соответствуют спецификации. В частности, -webkit-border-radius не поддерживает значения радиусов, заданные в процентах, а -moz-border-radius рассчитывает радиус по оси y в процентах от ширины блока, а не от высоты, как в спецификации. Возможность задать эллиптические радиусы через пробел поддерживается в Safari 3 и Chrome 1 и выше и в Firefox 3.5 и выше. Также в свойстве -webkit-border-radius отсутствует возможность указать разные значения радиуса для разных углов. Для этого приходится для каждого угла указывать радиус отдельно.
Свойство border-right Свойство border-left-widthКак добавить границу в HTML-таблицу
Чтобы добавить границу в HTML
| и | . Узнайте, как создать таблицу HTML здесь.Создание границы для таблицы HTML¶После создания таблицы HTML вы должны добавить к ней границу, поскольку по умолчанию границы не добавляются. Во-первых, давайте посмотрим на пример, в котором мы используем атрибут границы HTML. Пример создания HTML-таблицы с атрибутом border: ¶ Попробуйте сами »Результат¶
В любом случае, мы рекомендуем использовать свойство CSS border для добавления границы к вашим таблицам.Чтобы добавить границу к вашей таблице, вам нужно определить <таблица> | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Человек | Возраст | ||||||||||||
| Энн | 19 | ||||||||||||
| Сьюзи | 22 |