table-layout

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	7.0+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	auto
Наследуется	Нет
Применяется	К тегу <table> или к элементу, у которого значение display установлено как table или inline-table.
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом. Создано в версии CSS2, но проходит валидацию согласно версии CSS3.

Синтаксис

table-layout: auto | fixed | inherit

Значения

auto: Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает.
fixed: Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.
inherit: Наследует значение родителя.

Значения table-layout в табличном виде

Значение	Описание
auto	Алгоритм вычисления объёма таблицы браузер будет производить последовательно (снижает скорость загрузки)
fixed	Алгоритм вычисления объёма таблицы браузер будет производить исходя из установленных значений, объём внутреннего содержимого не будет влиять на установленные значение, т.е всё что не поместится в указанные значения будет или сжато или обрезано или выйдет за границы таблицы
inherit	Наследует значения от родителя

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

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство table-layout</title>
<style type="text/css">
<!--
table.auto {
table-layout:auto;
width:300px;
}
table.fixed {
table-layout:fixed;
width:300px;
}
caption {
caption-side:top;
padding-bottom:10px;
font-size:20px;
}
-->
</style>
</head>
<body>
<table class="auto" border="1">
<caption>Свойство со значением auto</caption>
<tr>
<td width="250px">888888</td>
<td width="50px">Восемьсот восемьдесят восемь тысяч восемьсот восемьдесят восемь</td>
</tr>
</table>
<br>
<table class="fixed" border="1">
<caption>Свойство со значением fixed</caption>
<tr>
<td width="250px">888888</td>
<td width="50px">Восемьсот восемьдесят восемь тысяч восемьсот восемьдесят восемь</td>
</tr>
</table>
</body>
</html>

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

Свойство со значением auto
888888	Восемьсот восемьдесят восемь тысяч восемьсот восемьдесят восемь

Свойство со значением fixed
888888	Восемьсот восемьдесят восемь тысяч восемьсот восемьдесят восемь

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Таблицы | Добавил: free20860soft (03.07.2013)

Просмотров: 727 | Рейтинг: 0.0/0

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

table-layout

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Значения table-layout в табличном виде

Значение

Описание

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

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

Браузеры