Фиксированый стиль таблицы или Fixed Table Layouts
Как вы наверняка знаете, CSS свойство table-layout предназначено для управления режимом формирования ширины столбцов в таблице. Оно может принимать следующие значения: авто, фиксировано или наследственно. По умолчанию в браузерах для отображения таблицы используется стандартное поведение: браузер рассчитывает ширину строки как сумму ширины всех ячеек. Следом, по тому же принципу рассчитывает ширину 2-й строки, и если размеры какой-либо ячейки превышают размеры вышестоящей ячейки, перестраивает всю таблицу. Далее определяет ширину 3-й ячейки, 4-й и т.д. В случае если таблица имеет много, очень много рядов, расчет ширины может немного затянуться…
Однако можно (я бы даже сказал нужно) задействовать упрощенный режим который выражается в том, что браузер при определении ширины не берет в расчет содержимое последующих ячеек, а опирается на значение свойств width таблицы, столбцов и ячеек из первой строки.
CSS
В CSS (таблицы каскадных стилей) с помощью свойства table-layout мы можем управлять какой режим формирования таблицы нам нужен. Речь идет собственно об этом:
table
Это свойство очень хорошо поддерживается и очень даже полезно, так как позволяет вам создавать более предсказуемую разметку под вашу таблицу. По умолчанию, это свойство установлено в значение авто, и это, наверно, известно большинству из вас. Но этот режим как по мне так очень ненадежный и непредсказуемый. Приведем пример:
Режим table-layout: fixed
Если теперь задействовать режим table-layout: fixed то можно уверенно получить вполне себе предсказуемый результат по месту. В случае применения этого режима, расчет ширины столбцов идет по первой строчке и все последующие используют это значение. Может и звучит странновато для понимания, но на самом деле все просто, приведем пример:
Применение
Крис озадачился этим вопросом, так как ему хотелось. что бы его «Pen»ы (в переводе еще смешнея звучит) в лист вью на CodePen отображались в столбиках с унифицированой шириной и не портили ему всю картину, вот что у него получилось:
Он остался очень доволен этим.
Надеюсь, все помнят, что таблицы нужны для табулированных значений и емайлов, а не для задания разметки страниц. Посмотрите на этот практический пример (предполагаю, что почти всем понравится это):
Для лучшего примера вы можете попробовать использовать элемент , чтобы так же задать ширину столбцов, так как остальное будет рассчитано в зависимости от значений в первой строчке.
Скорость
Что касается скорости, то говорят, что такой стиль формирования таблицы быстрейший, и это очевидно — бо остальные строки не анализируются и следовательно время генерации не зависит от длины таблицы как таковой.
Почтовики
Что касается использования в разных почтовых клиентах, то это свойство, согласно сервису мониторинга поддержки свойств CSS в почтовых клиентах, прекрасно поддерживается.
Заключение
Надеюсь, этот перевод кому-то действительно поможет лучше понять, как работает table-layout: fixed и подбросит идей по его использованию в своих проектах.
Кстати, у кого нибудь есть идеи, почему это свойство не используется по умолчанию?
CSS свойство table-layout
Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
CSS синтаксис
table-layout: auto | fixed | initial | inherit;
Возможные значения
Значение
Описание
auto
Значение по умолчанию. Автоматическая разметка таблицы. Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и после этого отображает.
fixed
Фиксированная разметка таблицы. Горизонтальная разметка таблицы зависит от ее ширины и ширины ее колонок, а не от контента ячеек. Ширина колонок в этом случае определяется либо с помощью тега , либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет обрезано, либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.
inherit
Значение наследуется от родительского элемента.
initial
Устанавливает значение по умолчанию.
Пример использования
Устанавливаем алгоритм расчета ширины ячеек HTML таблицы
table-layout
Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.
Краткая информация
Значение по умолчанию
auto
Наследуется
Нет
Применяется
К тегу
или к элементу, у которого значение display установлено как table или inline-table .
Анимируется
Нет
Синтаксис
table-layout: auto | fixed
Описание
Пример
Указывает тип значения.
A && B
Значения должны выводиться в указанном порядке.
&&
A | B
Указывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || B
Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count
[ ]
Группирует значения.
[ crop || cross ]
*
Повторять ноль или больше раз.
[,]*
+
Повторять один или больше раз.
+
?
Указанный тип, слово или группа не является обязательным.
Каждая спецификация проходит несколько стадий одобрения.
Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
5
12
1
7
1
1
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Рецепты
Справочник CSS
!important
::after
::backdrop
::before
::first-letter
::first-line
::marker
::placeholder
::selection
:active
:blank
:buffering
:checked
:default
:dir
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:focus-within
:fullscreen
:hover
:in-range
:indeterminate
:invalid
:is()
:lang()
:last-child
:last-of-type
:link
:muted
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:paused
:placeholder-shown
:playing
:read-only
:read-write
:required
:root
:seeking
:stalled
:target
:valid
:visited
:volume-locked
@charset
@document
@font-face
@import
@keyframes
@media
@page
@supports
@viewport
accent-color
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
aspect-ratio
backdrop-filter
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
background-repeat
background-size
block-size
border
border-block
border-block-color
border-block-end
border-block-end-color
border-block-end-style
border-block-end-width
border-block-start
border-block-start-color
border-block-start-style
border-block-start-width
border-block-style
border-block-width
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
font-family
font-kerning
font-size
font-stretch
font-style
font-variant
font-weight
gap
height
hyphenate-character
hyphenate-limit-chars
hyphens
image-rendering
justify-content
left
letter-spacing
line-clamp
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
marks
max-height
max-width
min-block-size
min-height
min-width
mix-blend-mode
object-fit
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-block
padding-block-end
padding-block-start
padding-bottom
padding-inline
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
place-content
pointer-events
position
quotes
resize
right
row-gap
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip-ink
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-fill-color
text-indent
text-orientation
text-overflow
text-shadow
text-stroke
text-stroke-color
text-stroke-width
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom
table-layout
Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом.
Синтаксис
table-layout: auto | fixed | inherit
Значения
auto Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает. fixed Ширина колонок в этом случае определяется либо с помощью тега
, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы. inherit Наследует значение родителя.
