Сервировка стола - CSS-хитрости

В table-layoutопределяет свойство , какой алгоритм браузер должен использовать , чтобы выложить строки таблицы, ячейки и столбцы.

table ( table-layout: fixed; )

Как объясняется в спецификации CSS2.1, макет таблицы обычно является делом вкуса и может варьироваться в зависимости от выбора дизайна. Однако браузеры автоматически применяют определенные ограничения, которые определяют порядок расположения таблиц. Это происходит, когда для table-layoutсвойства установлено значение auto(по умолчанию). Но эти ограничения можно снять, если для table-layoutнего установлено значение fixed.

Значения

auto: по умолчанию. Автоматический алгоритм браузера используется для определения расположения строк, ячеек и столбцов таблицы. Результирующий макет таблицы обычно зависит от содержимого таблицы.
fixed: С этим значением макет таблицы игнорирует содержимое и вместо этого использует ширину таблицы, любую заданную ширину столбцов, а также значения границ и интервалов между ячейками. Используемые значения столбцов основаны на ширине, определенной для столбцов или ячеек для первой строки таблицы.
inherit: указывает, что значение наследуется от table-layoutзначения своего родителя

Чтобы значение fixedимело какой-либо эффект, ширина таблицы должна быть установлена не на auto(значение по умолчанию для widthсвойства). В демонстрациях ниже вся ширина таблицы установлена на 100%, что предполагает, что мы хотим, чтобы таблица заполняла свой родительский контейнер по горизонтали.

Лучший способ увидеть эффект от алгоритма фиксированного макета таблицы - использовать демонстрацию.

См. Демонстрацию Pen Demo для свойства table-layout CSS Луи Лазариса (@impressivewebs) на CodePen.

Когда вы впервые просмотрите приведенную выше демонстрацию, вы заметите, что расположение столбцов таблицы несбалансированное и неудобное. В этот момент таблица использует алгоритм браузера по умолчанию, чтобы определить, как расположить таблицу, а это означает, что содержимое будет определять макет. Демонстрация преувеличивает этот факт, включая длинную строку текста внутри одной ячейки таблицы, в то время как все остальные ячейки таблицы используют только два слова каждая. Как видите, браузер расширяет первый столбец, чтобы разместить больший объем содержимого.

Если вы нажмете кнопку «Toggle table-layout: fixed», вы увидите, как выглядит раскладка таблицы при использовании «фиксированного» алгоритма. Когда table-layout: fixedприменяется, содержимое больше не определяет макет, а вместо этого браузер использует любую заданную ширину из первой строки таблицы для определения ширины столбцов. Если в первой строке нет значений ширины, ширина столбца делится поровну по таблице, независимо от содержимого ячеек.

Дальнейшие примеры могут помочь прояснить это. В следующей демонстрации таблица имеет элемент, первый элемент которого имеет ширину 400px. Обратите внимание: в этом случае переключение table-layout: fixedне действует.

См. Демонстрацию Pen Demo для свойства table-layout CSS Луи Лазариса (@impressivewebs) на CodePen.

Это происходит потому, что алгоритм макета по умолчанию, по сути, говорит: «Сделайте первый столбец шириной 400 пикселей и распределите остальные столбцы в зависимости от их содержимого». Поскольку остальные три столбца имеют то же содержимое, что и друг друга, изменений не будет. Но теперь давайте добавим дополнительный текст в один из других столбцов:

См. Демонстрацию Pen Demo для свойства CSS table-layout с шириной столбца и переменным содержимым Луи Лазариса (@impressivewebs) на CodePen.

Теперь, если вы нажмете кнопку-переключатель, вы увидите, что столбцы настраиваются в соответствии с фиксированным макетом независимо от содержимого. И снова происходит то же самое; размер первого столбца составляет 400 пикселей, затем остальные столбцы делятся поровну. Но на этот раз разница заметна, поскольку в одном из столбцов есть лишнее содержимое.

Как алгоритм фиксированного макета определяет ширину столбцов

Следующие две демонстрации должны помочь понять, что первая строка таблицы - это то, что помогает определить ширину столбцов таблицы, установленной на table-layout: fixed.

См. Демонстрацию пера для макета таблицы CSS с ячейкой в строке 1, заданной шириной, заданной Луи Лазарисом (@impressivewebs) на CodePen.

В приведенной выше демонстрации первая ячейка в первой строке таблицы имеет ширину 350 пикселей. При переключении table-layout: fixedнастраиваются другие столбцы, но первый остается прежним. Теперь попробуйте следующую демонстрацию:

См. Демонстрацию пера для макета таблицы CSS с ячейкой в строке 2, заданной шириной, заданной Луи Лазарисом (@impressivewebs) на CodePen.

В данном случае это вторая строка, ширина которой привязана к ее первой ячейке таблицы. Теперь, когда нажата кнопка переключения, ширина всех столбцов настраивается. Опять же, это связано с тем, что алгоритм фиксированной компоновки использует первую строку для определения ширины столбцов, и в конечном итоге ширина распределяется равномерно.

Преимущества алгоритма фиксированного макета

Эстетические преимущества использования table-layout: fixedдолжны быть очевидны из демонстрации выше. Но еще одно важное преимущество - производительность. В спецификации фиксированный алгоритм называется «быстрым», и на это есть веские причины. Браузеру не нужно анализировать все содержимое таблицы перед определением размера столбцов; ему нужно проанализировать только первую строку. В результате макет таблицы обрабатывается быстрее.