计算列宽度不同于列声明的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

当您设置表格列的宽度时，它只是推荐的最小宽度，浏览器会尽可能地遵守。列的实际宽度是根据其内容的大小计算的，在列之间均匀划分剩余空间。

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

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