Вычисленная ширина столбца отличается от объявленной css ширины столбца.Как браузер определяет ширину?

Question

Допустим, у меня есть html-таблица с заявленной шириной CSS 750px.Он имеет 5 столбцов, и каждый столбец имеет ширину 50px, объявленную с использованием css (все td имеют ширину 50px).Очевидно, что сумма ширины столбцов составляет 250 пикселей, что меньше, чем 750 пикселей.

Когда браузер отображает таблицу, каждый столбец имеет различную вычисленную ширину.У меня есть один столбец, который имеет только 5 пробелов, но вычисленная ширина превышает 100 пикселей (намного больше, чем 5).

Все столбцы соответствуют включенному тексту плюс некоторые дополнительные пробелы.В разметке нет жестко закодированной ширины столбца.Всего лишь 50 пикселей в css для 'td'.

Как браузер вычисляет визуализированную ширину каждого столбца?

Answer 1

Вам нужно использовать стиль table-layout.Есть 3 возможных значения:

• auto.По умолчанию.Ширина зависит от содержимого.
• fixed.Зависит от указанной ширины в CSS.
• inherit.Наследует значение от своего родителя.

В вашем случае вам нужно использовать table-layout: fixed для элемента таблицы.

Answer 2

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

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

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

Answer 3

Браузеры пытаются разместить ячейки в пределах ширины таблицы, расширяя / сужая td s по мере необходимости.

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

Вы можете узнать больше о том, как это работает здесь .

Answer 4

Это называется коробочная модель. отступы и границы добавляются к ширине элементов. Таким образом, элемент DIV с padding: 10px; width: 50px; border: 1px solid black; на самом деле имеет ширину 72 пикселя. Я ожидаю, что у твоего телевизора есть граница или отступы?