计算的列宽与 css 声明的列宽不同。浏览器如何决定宽度？

Posted 2023-03-06

【中文标题】计算的列宽与 css 声明的列宽不同。浏览器如何决定宽度？

【英文标题】：Computed column width is different than css declared width for column. How does browser decide width?

【发布时间】：2011-04-09 23:00:22

【问题描述】：

假设我有一个 html 表格，其 css 声明宽度为 750 像素。它有 5 列，每列的宽度为 50px，使用 css 声明（所有 td 的宽度为 50px）。显然，列宽的总和是 250px，小于 750px。

当浏览器呈现表格时，每一列都有不同的计算宽度。我有一列只有 5 个空格，但计算出的宽度超过 100 像素（远远超过 5 个）。

所有列都适合其包含的文本以及一些额外的空格。标记中没有硬编码的列宽。 'td' 的 css 中只有一个 50px。

浏览器如何计算每列的渲染宽度？

【参考方案1】：

这被称为盒子模型。填充和边框被添加到元素宽度。所以带有padding: 10px; width: 50px; border: 1px solid black; 的DIV 元素实际上是72 像素宽。我希望您的 td 有边框或填充？

【讨论】：

在处理表格时，边框折叠也会起作用。

无边框。没有填充。没有间距。

【参考方案2】：

浏览器尝试使单元格适应表格宽度，根据需要扩展/收缩tds。

因此，您将表格设置为 750 像素，但只给出了 250 像素的宽度。在这种情况下，浏览器将采用其传统的间距方案，根据每个单元格中的内容，尝试均匀地分隔单元格。

你可以阅读更多关于它是如何工作的here。

【参考方案3】：

当您设置表格列的宽度时，它只是一个推荐的最小宽度，浏览器会尽可能采用该宽度。列的实际宽度是根据其内容的大小计算出来的，在列之间平均分配剩余空间。

如果任何一列最终会比您指定的宽度更窄，如果其他列中有可用空间，浏览器会尝试调整它，但在您的情况下，列已经超过最小值。

计算单元格大小的实际算法因浏览器而异，这意味着根据您使用的浏览器，列最终会略有不同。

【讨论】：

每列最​​长的内容小于计算的宽度。每列都有额外的空格。没有一列比我的宽度窄。浏览器是否尝试在每一列中equally 放置额外的空格以达到表格宽度？关键字同样在这里。我有一列只有硬编码的空格，没有文本，但它最终的列比空格的总和更宽。

@Tony_Henrich：是的，根据浏览器中的一些未知算法，额外的空间在列之间被平均分配或按比例分配。

【参考方案4】：

您需要使用table-layout 样式。有 3 个可能的值：

auto。默认。宽度取决于内容。 fixed。取决于 CSS 中规定的宽度。 inherit。从其父级继承值。

在您的情况下，您需要在表格元素上使用 table-layout: fixed。