Question

<td>
<div id="test">...</div>
</td>
<td>
.....
</td>

我可以从firebug看到td比“test”div宽约40px（宽度+边框+边距都包括在内），但是没有css样式可以做到这一点（没有设置宽度，填充）！

为什么“td”不如div那么宽？

我现在正在硬编码td to9和“test”div一样宽，但感觉不舒服。

Answer 1

如果没有剩下的代码，我会在这里出去，但<td>将根据表格中的表格宽度/列数自动调整大小。如果您的表没有指定明确的宽度，那么它将扩展到其容器或父元素的100％宽度。您可以通过在表格上设置显式宽度或根据需要设置表格单元格来避免这种情况。

在以下场景中，每列将自动调整为tablewidth /列数，或者在这种情况下为400/4 = 100.因此每列将为100px宽。

<table style="width:400px">
<td></td>
<td></td>
<td></td>
<td></td>
</table>

根据浏览器的不同，此方案中有两种可能的结果。 1.该表将扩展为其父级宽度的100％，或者此处为600px。这意味着每列将自动调整为150px宽。 2.表和列可以扩展到其列组中最宽子元素的宽度。

<body style="width: 600px"> <!-- Could be a div or other element here -->
<table>
<td></td>
<td></td>
<td></td>
<td></td>
</table>
</body>

可以找到WC3规范here并提供一些关于浏览器假设如何实现HTML 4.01规范的详细信息。