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

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

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

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

• auto . 默认值。宽度取决于内容。
• fixed
• inherit

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

td

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

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

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