border-collapse | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 04.12.2016
Главная » Справочник CSS3 » Свойства таблицы


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


border-collapse | Свойство CSS

Свойство border-collapse устанавливает вид границ в таблице.




Свойство border-collapse устанавливает границы таблицы.Вариантов границ может быть два.Или ячейки имеют одну линию границы,или у каждой ячейки своя граница,по отношению к соседним ячейкам так и к самой таблице.Если у каждой ячейки граница своя,то это увеличит общую границу вдвоеСвойство применимо к тегам table,thead,tbody,tfoot,colgroup,col,tr,th,td.Создано в версии CSS2 но проходит валидацию согласно версии CSS3.




Дополнительные значения border-collapse


Значение
Описание
collapseГраница у ячеек общая
separateУ каждой ячейки граница своя,общая граница будет иметь суммарную толщину
inheritНаследует значение от родителя

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство border-collapse</title>
<style type="text/css">
<!--
.collapse {
border-collapse:collapse;
}
.separate {
border-collapse:separate;
}
th {
border:5px solid red;
background:#0ba1d5;
color:#ffffff;
}
td {
border:5px solid red;
background:#0ba1d5;
padding:5px;
color:#ffffff;
}
-->
</style>
</head>
<body>
<table class="collapse" >
<tbody>
<tr>
<th><h5>Значение</h5></th>
<th><h5>Описание</h5></th>
</tr>
<tr>
<td><big><em>collapse</em></big></td>
<td>Граница у ячеек общая</td>
</tr>
</tbody>
</table>
<br>
<table class="separate" >
<tbody>
<tr>
<th><h5>Значение</h5></th>
<th><h5>Описание</h5></th>
</tr>
<tr>
<td><big><em>separate</em></big></td>
<td>Граница у каждой ячейки своя</td>
</tr>
</tbody>
</table>
</body>
</html>

Пример в действии



Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse
Категория: Свойства таблицы | Добавил: IZOTOP (30.03.2012) | Автор: Меренков Михаил E W
Просмотров: 662 | Теги: css, свойство, style, границы таблицы, border-collapse | Рейтинг: 5.0/1

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]