Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.
Краткая информация
Значение по умолчанию
auto
Наследуется
Нет
Применяется
К тегу
или к элементу, у которого значение display установлено как table или inline-table .
Анимируется
Нет
Синтаксис
Синтаксис
Описание
Пример
Указывает тип значения.
A && B
Значения должны выводиться в указанном порядке.
&&
A | B
Указывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || B
Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count
[ ]
Группирует значения.
[ crop || cross ]
*
Повторять ноль или больше раз.
[,]*
+
Повторять один или больше раз.
+
?
Указанный тип, слово или группа не является обязательным.
inset?
Повторять не менее A, но не более B раз.
#
Повторять один или больше раз через запятую.
#
Значения
Пример
table < table-layout: fixed; /* Фиксированная ширина ячеек */ width: 100%; /* Ширина таблицы */ >.col1 < width: 160px; >.coln
2012
2013
2014
2015
2016
2017
2018
2019
2020
Нефть
5
7
2
8
3
34
62
74
57
Золото
3
6
4
6
4
69
72
56
47
Дерево
5
8
3
4
7
73
79
34
86
Объектная модель
Объект.style.tableLayout
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом.
Синтаксис
table-layout: auto | fixed | inherit
Значения
auto Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает. fixed Ширина колонок в этом случае определяется либо с помощью тега
, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
table < table-layout: fixed; /* Фиксированная ширина ячеек */ width: 100%; /* Ширина таблицы */ >.col1 < width: 160px; >.coln
2012
2013
2014
2015
2016
2017
2018
2019
2020
Нефть
5
7
2
8
3
34
62
74
57
Золото
3
6
4
6
4
69
72
56
47
Дерево
5
8
3
4
7
73
79
34
86
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Фиксированый стиль таблицы или Fixed Table Layouts
Как вы наверняка знаете, CSS свойство table-layout предназначено для управления режимом формирования ширины столбцов в таблице. Оно может принимать следующие значения: авто, фиксировано или наследственно. По умолчанию в браузерах для отображения таблицы используется стандартное поведение: браузер рассчитывает ширину строки как сумму ширины всех ячеек. Следом, по тому же принципу рассчитывает ширину 2-й строки, и если размеры какой-либо ячейки превышают размеры вышестоящей ячейки, перестраивает всю таблицу. Далее определяет ширину 3-й ячейки, 4-й и т.д. В случае если таблица имеет много, очень много рядов, расчет ширины может немного затянуться…
Однако можно (я бы даже сказал нужно) задействовать упрощенный режим который выражается в том, что браузер при определении ширины не берет в расчет содержимое последующих ячеек, а опирается на значение свойств width таблицы, столбцов и ячеек из первой строки.
CSS
В CSS (таблицы каскадных стилей) с помощью свойства table-layout мы можем управлять какой режим формирования таблицы нам нужен. Речь идет собственно об этом:
Это свойство очень хорошо поддерживается и очень даже полезно, так как позволяет вам создавать более предсказуемую разметку под вашу таблицу. По умолчанию, это свойство установлено в значение авто, и это, наверно, известно большинству из вас. Но этот режим как по мне так очень ненадежный и непредсказуемый. Приведем пример:
Режим table-layout: fixed
Если теперь задействовать режим table-layout: fixed то можно уверенно получить вполне себе предсказуемый результат по месту. В случае применения этого режима, расчет ширины столбцов идет по первой строчке и все последующие используют это значение. Может и звучит странновато для понимания, но на самом деле все просто, приведем пример:
Применение
Крис озадачился этим вопросом, так как ему хотелось. что бы его «Pen»ы (в переводе еще смешнея звучит) в лист вью на CodePen отображались в столбиках с унифицированой шириной и не портили ему всю картину, вот что у него получилось:
Он остался очень доволен этим.
Надеюсь, все помнят, что таблицы нужны для табулированных значений и емайлов, а не для задания разметки страниц. Посмотрите на этот практический пример (предполагаю, что почти всем понравится это):
Для лучшего примера вы можете попробовать использовать элемент , чтобы так же задать ширину столбцов, так как остальное будет рассчитано в зависимости от значений в первой строчке.
Скорость
Что касается скорости, то говорят, что такой стиль формирования таблицы быстрейший, и это очевидно — бо остальные строки не анализируются и следовательно время генерации не зависит от длины таблицы как таковой.
Почтовики
Что касается использования в разных почтовых клиентах, то это свойство, согласно сервису мониторинга поддержки свойств CSS в почтовых клиентах, прекрасно поддерживается.
Заключение
Надеюсь, этот перевод кому-то действительно поможет лучше понять, как работает table-layout: fixed и подбросит идей по его использованию в своих проектах.
Кстати, у кого нибудь есть идеи, почему это свойство не используется по умолчанию?
html>head>metacharset="utf-8"/>title>table-layouttitle>style>tabletable-layout:fixed;/* Фиксированная ширина ячеек */width:100%;/* Ширина таблицы */>.col1width:160px;>.colnwidth:60px;>style>head>body>tableborder="1">colclass="col1"/>colspan="9"class="coln"/>tr>td>td>td>2012td>td>2013td>td>2014td>td>2015td>td>2016td>td>2017td>td>2018td>td>2019td>td>2020td>tr>tr>td>Нефтьtd>td>5td>td>7td>td>2td>td>8td>td>3td>td>34td>td>62td>td>74td>td>57td>tr>tr>td>Золотоtd>td>3td>td>6td>td>4td>td>6td>td>4td>td>69td>td>72td>td>56td>td>47td>tr>tr>td>Деревоtd>td>5td>td>8td>td>3td>td>4td>td>7td>td>73td>td>79td>td>34td>td>86td>tr>table>body>html>
