Русский
Русский
English
Свойства CSS
Статистика
Реклама

table-layout

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Частичная поддержка
Частичная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS2+
Значение по умолчанию auto
Наследуется Нет
Применяется К тегу <table> или к элементу, у которого значение display установлено как table или inline-table.
Ссылка на спецификацию открыть в новой вкладке
Описание
Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом.
Синтаксис
table-layout: auto | fixed | inherit
Аргументы
auto - Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает.
fixed - Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.
inherit - Наследует значение родителя.
Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>table-layout</title>
<style type="text/css">
TABLE {
table-layout: fixed; /*Фиксированная ширина ячеек*/
}
</style>
</head>
<body>
 <table width="100%" cellspacing="0" border="1">
  <col width="160" />
  <col span="9" width="60" />
  <tr>
   <td>&nbsp;</td>
   <td>2012</td><td>2013</td><td>2014</td><td>2015</td>
   <td>2016</td><td>2017</td><td>2018</td><td>2019</td>
   <td>2020</td>
  </tr>
  <tr>
   <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
   <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
  </tr>
  <tr>
   <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
   <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
  </tr>
  <tr>
   <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
   <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
  </tr>
 </table>
</body>
</html>

Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (-)
Имя
Электронная почта

Последние комментарии

© 2006-2025, heroes-3.ru