Почему table-layout: фиксированное влияние на ширину родительского элемента?

Ответ 1

Похоже , ты не первый, кто это понял. Впрочем, вы можете быть вторыми.

Чтобы быть ясным, это сочетание двух проблем:

1. Ширина абсолютно позиционированного элемента сжимается до упора. Как бы то ни было, считается, что ширина усадки к ширине будет такой же широкой, как позволяет блок, содержащий элемент, содержащий элемент. (Содержащим блоком для абсолютно позиционированного body является исходный содержащий блок.)

2. Процентная ширина элемента, содержащий блок, зависит от его содержимого для автоматического определения размера, приводит к неопределенному поведению.

Проблема №2 довольно легко списать:

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

т.е. размер body с использованием усадки для соответствия, тогда таблица устанавливается на 80% от этой ширины, а размер body "не вычисляется снова". Единственная "неопределенность" в этом заключается в том, что спецификация не требует или не запрещает, или действительно заботится о том, что делают реализации.

Таким образом, возникает вопрос, почему сокращение до усадки "как можно шире" в # 1 до определения размера таблицы в # 2. Вот как спецификация описывает сжатие для соответствия элементам:

[...] Грубо: вычислить предпочтительную ширину, форматируя содержимое, не разбивая строки, отличные от явных разрывов строк, а также вычисляйте предпочтительную минимальную ширину, например, путем попытки всех возможных разрывов строк. CSS 2.1 не определяет точный алгоритм. В-третьих, вычислить доступную ширину: это определяется путем решения для "width" после установки "left" (в случае 1) или "right" (в случае 3) на 0.

Затем ширина усадки до упора: мин (максимальная (предпочтительная минимальная ширина, доступная ширина), предпочтительная ширина).

Но это не говорит нам, почему, или даже это, предпочтительная ширина таблицы фиксированного макета "такая же широкая, как позволяет ее содержащий блок". Ни css-size-3, ни css-tables-3, похоже, не содержат ответа.

По словам Дэвида Барона (из той же темы), который работает на Гекко:

Таблицы с фиксированной компоновкой сообщают о том, что встроенный максимальный размер встроенного размера является бесконечным.

(обратите внимание, что "максимальный размер встроенного шрифта" означает то же, что и "предпочтительная ширина")

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

И, по крайней мере на данный момент, это так близко, что я доберусь до официального источника, потому что у меня возникли проблемы с достижением того же вывода, просто прочитав css-sizing-3, и я не уверен, что выражение Дэвида основано на Только поведение Gecko, поведение всех реализаций или определенное поведение.

Ответ 2

Это мое объяснение, основанное на описанной выше проблеме, поэтому его можно рассматривать как спекуляцию, основанную на требованиях к бонусам для "официальных ресурсов".

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

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

Когда table-layout:fixed; применяется без родительского контейнера, имеющего любую установленную ширину и собственную ширину, установленную в процентах, она расширяет свой родительский контейнер (независимо от того, что этот контейнер является телом /div/etc) до 100% и принимает указанную ширину (в данном случае 80%) относительную с родительским.

Это сделало бы это, поскольку его назначение по умолчанию - с настройкой ширины, чтобы обеспечить равномерность распределения столбцов, независимо от того, есть ли столбцы или нет. Если они не являются столбцами, они обрабатывают элемент как один столбец. Для этого все равно потребуется, чтобы его ширина была относительно ее родительской (когда ее собственная ширина установлена в%).

Пример table-layout:fixed не применяется, поскольку он не имеет определенной ширины, хотя он установлен в CSS, table-layout:auto применяется, поскольку это значение по умолчанию:

body {
  border: 2px solid red;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: absolute;
}

.c {
  display: table;
  table-layout: fixed;
  /* width: 80%; */
  outline: 2px solid blue;
}

<div class="c">d</div>

Ответ 3

Во втором примере,

body {
  border   : 2px solid red;
  height   : 100vh;
  margin   : 0;
  padding  : 0;
  position : absolute;

}

.c {
  display : table;
  width   : 80%;
  outline : 2px solid blue;
  /* table-layout : fixed; */
}

Вы абсолютно позиционируете тело, поэтому его извлекают из нормального потока, и это не влияет на позиционирование или размер его .c ребенка.

Таким образом, ширина .c не является 80% тела, как вы могли бы ожидать.

Однако вы можете использовать блоки, как пиксели или Vw, чтобы установить ширину .c и результат будет более понятным, как это.

.c {
  display : table;
  width   : 80vw; 
  outline : 2px solid blue;
  /* width : 80%;  */
  /* table-layout : fixed; */
}

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

Процитировать по спецификации W3C

17.5.2.1 Фиксированная раскладка таблицы С помощью этого (быстрого) алгоритма горизонтальная компоновка таблицы не зависит от содержимого ячеек...