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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

当您设置表格列的宽度时，它只是建议的最小宽度，浏览器会尽可能地尝试兑现。列的实际宽度是根据其内容的大小计算出来的，在列之间均匀地划分剩余空间。

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

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

Answer 3

浏览器尝试将单元格放入表格宽度内，根据需要扩展/收缩td。

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

您可以详细了解其工作原理here。

Answer 4

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