代码之家 › 专栏 › 技术社区 › Tony_Henrich

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

internet-explorer-7 browser firefox css html

11

Tony_Henrich · 技术社区 · 15 年前

假设我有一个html表,css声明的宽度为750px。它有5列,每列的宽度为50px,使用css声明(所有td的宽度都为50px)。显然,列宽之和是250px,小于750px。

浏览器呈现表格时,每列的计算宽度都不同。我有一个列,它只有5个空格,但计算的宽度超过100px(远远超过5)。

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

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

4 回复 | 直到 15 年前

1

6

Guffa 15 年前

当您设置表列的宽度时,它只是一个建议的最小宽度,如果可能的话,浏览器会尝试遵循这个最小宽度。列的实际宽度是根据其内容的大小来计算的,在列之间平均划分剩余的空间。

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

2

16

Vadim Ovchinnikov 8 年前

你需要使用 table-layout 风格。有3个可能的值:

在你的情况下,你需要使用 table-layout: fixed 在表元素上。

3

2

Jeff Rupert 15 年前

td

所以,你把表设为750px,但只给出了250px的宽度。在这种情况下,浏览器将采用传统的间距方案,根据每个单元格中的内容,尝试均匀地将单元格隔开。

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

4

0

Johan 15 年前

这就是所谓的盒子模型。填充和边框将添加到元素宽度中。所以一个DIV元素 padding: 10px; width: 50px; border: 1px solid black;