Фиксированная компоновка

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

1. Любой элемент столбца, свойство width которого имеет значение, отличное от auto, определяет ширину этого столбца.
2. Если столбец имеет ширину auto, но свойство width ячейки первой строки таблицы этого столбца имеет значение, отличное от auto, эта ячейка определяет ширину столбца. Если ячейка охватывает несколько столбцов, ширина распределяется между столбцами.
3. Ширина всех столбцов, по-прежнему сохраняющих размер auto, по возможности максимально уравнивается. В данном случае ширина таблицы определяется или значением свойства width таблицы, или суммой ширин столбцов – тем, что имеет большее значение. Если таблица оказывается шире суммарной ширины всех ее столбцов, разница делится на число столбцов и добавляется к каждому из них.

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


Размеры ячеек любой последующей строки приводятся в соответствие ширинам столбцов, определенным первой строкой. Ячейки в этих строках не меняют ширины столбца, а это означает, что любое значение свойства width, заданное для этих ячеек, будет проигнорировано. Если содержимое не помещается, значение свойства overflow ячейки определяет, будет ли содержимое отсечено, будет ли оно видимым или будет генерироваться полоса прокрутки:

table {table-layout: fixed; width: 400px;
border-collapse: collapse;}
td {border: 1px solid;}
col#c1 {width: 200px;}
#r1c2 {width: 75px;}
#r2c3 {width: 500px;}







1-11-2 1-31-4
2-12-2 2-32-4
3-13-2 3-33-4
4-14-2 4-34-4


Ширина первого столбца равна 200 пикселам, что составляет половину ширины таблицы в 400 пикселов.


Второй столбец имеет ширину 75 пикселов, потому что ширина ячейки первой строки этого столбца была задана явно. Третий и четвертый столбцы – каждый по 61 пикселу шириной. Почему? Потому, что сумма ширин первого и второго столбцов (275px) плюс различные рамки между столбцами (3px) равняется 278 пикселов. 400 минус 278 получается 122, и 122 делится на два, что дает 61 пиксел – такова ширина третьего и четвертого столбцов. А что же ширина в 500 пикселов, заданная для #r2c3? Она игнорируется, потому что эта ячейка находится не в первой строке таблицы. Обратите внимание, что для применения модели с фиксированной шириной совершенно не обязательно явно задавать ширину таблицы, хотя это, конечно, помогает. Например, исходя из следующего агент пользователя мог бы подсчитать ширину таблицы, которая получилась бы на 50 пикселов меньше ширины родительского элемента:

table {table-layout: fixed; margin: 0 25px;
width: auto;}

Однако это не обязательно. Агенты пользователя могут построить любую таблицу, имеющую значение auto для свойства width, с помощью модели с автоматической шириной.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическая компоновка
Анонимные объекты таблицы
Визуальная организация таблицы
Выравнивание
Высота

Вернуться в раздел: CSS / 11. Верстка таблиц