<td>类是什么？为什么较大的数字会导致宽度变窄？我感到非常困惑。

Question

这并不是一个实际存在的问题，但我想了解其中的原因以便更好地理解。我正在编写一个新网站，需要在设计的页脚中使用单独的表格。(我不经常使用它们，但这个表格对于这个项目来说确实使生活变得更加容易。)

我正在为表格的 td 使用一个 CSS 类，唯一的元素是 width:%; 但出于某些我无法理解的原因，将百分比从10%增加到20%实际上会使td变窄。完全相反。

我真的被这个问题难住了，有人能解释一下吗？ HTML:

<div class="footertable">
<table border="2">
<tbody>
<tr>
<td valign="top" class="footer">
<div class="footerheading">SHOPPING</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">CUSTOMER SERVICE</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">PAYMENT OPTIONS</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">SOCIAL</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">ORDER</div>
</td>
</tr>
</tbody>
</table>
</div>​

CSS:

.footertable { margin:auto; max-width:1080px;}
td.footer {width:10%;}​

注意事项：

• 当百分比小于 24 时，出现奇怪的行为：从 15 到 23 总宽度减少，而从 23 到 24 突然扩展。对于大于 24 的百分比，您会得到正常的行为。
• 无论您是指定表格的最大宽度还是宽度，都没有关系
• 该问题可以在 Chrome、Firefox、Opera 和 IE9 中重现
• jsFiddle 在这里：http://jsfiddle.net/BPygA/

- GibsonFX

---

你能否把HTML和CSS发布上来，以便我们查看？http://jsfiddle.net/非常方便分享这些片段。 - Luke Merrett

请将代码在此处发布，而不是仅在JS Fiddle上发布。 - David Thomas

使用表格进行布局并不会让生活变得更加轻松（除非你在为电子邮件客户端编写代码）。 - fmalina

现在我正确地理解了问题，但我仍然无法理解发生了什么。我将在您的问题中添加注释并删除我的答案。 - Benjamin Crouzier

对于像这样的单行表格，我建议使用列表，就像简单菜单一样。删除list-style-type，并浮动li，然后你就可以了。如果需要表格单元格行为，甚至可以添加display: table-cell。 - Máthé Endre-Botond

SinistraD 这不是完整的表格，只是我需要展示的最小内容，以便让其他人能够复制问题。 - GibsonFX

Answer 1

表格布局有其支持者和反对者，但有一点是肯定的：这是一种高级操作。它像是各种力量的组合，有些强，有些弱，最终决定你的列宽。并且有很多输入变量：

- table-layout: 是否使用固定表格布局 - 表格是否具有特定宽度（以像素或百分比或不具有宽度） - 所有列是否都具有宽度？ - 表格中是否有colgroup元素？ - 表格中有多少可用空间？ - 是否存在任何单元格具有不可打断的内容？

对于没有经验的人来说，这可能是噩梦。

在您的特定情况下，表格没有特定的宽度，这意味着它将是列宽的总和。但是，列以百分比大小调整，这将是总表格宽度的百分比。你可以看到这是一个先有鸡还是先有蛋的问题。

此外，使用不加起来等于100%的百分比是有点未定义的。

我建议您退后一步，仔细考虑您究竟要实现什么。

- jpsimons

---

我的目标宽度是20%，除以5得到100%。宽度由限制的max-width:1080px定义，请不要把我误认为是一个经验不足的表格用户，当标准做法仍然使用表格时，我使用了许多只用表格构建的网站。我没有对表格本身应用宽度的原因是，在通过w3c验证代码时，我遇到了一个错误，说表格中的宽度元素正在被逐步淘汰，应该使用CSS来控制宽度，所以我就这样做了。也许我读错了。 - GibsonFX

Answer 2

我可以看到表格单元格的宽度在10%和20%之间切换。

将表格本身（而不是包含的DIV）添加宽度会改变行为：

http://jsfiddle.net/BPygA/2/

如果表格本身没有宽度，浏览器将根据单元格的内容猜测如何显示它们。我不确定为什么当百分比设置为较大数字时，它选择较小的宽度，但这是一种非确定性计算，所以浏览器可以自由选择（参见下面的规范）。

换句话说，如果表格没有宽度，您告诉浏览器每个单元格是可变值的10%。

另一个考虑因素可能是该表格具有5个单元格。将每个单元格设置为10％的结果总宽度仅为50％。再次，浏览器必须猜测总宽度，但还必须确定剩下的50％应该怎么处理。

正如@Jacob所指出的，W3定义了建议（但仅为建议），以指导用户代理如何呈现表格。

这个算法反映了本规范编写时几个流行的HTML用户代理的行为。在“table-layout”为“auto”的情况下，UA不需要实施此算法来确定表格布局；即使它导致不同的行为，他们也可以使用任何其他算法。

UA 应尝试使用请求的百分比，但并非总是可能的。

列宽度的百分比值是相对于表格宽度的。 如果表格具有 'width: auto'，则百分比表示对列宽度的约束，UA 应尽量满足这些约束。 （显然，这并非总是可能的：如果列宽度为“110％”，则无法满足此约束。）

http://w3.org/TR/CSS2/tables.html#propdef-table-layout

我很想听一个更好的解释。

- Tim M.

---

你可能希望查看http://www.w3.org/TR/CSS2/tables.html#propdef-table-layout。在规范中，固定宽度和自动宽度具有不同的推荐算法；基本上取决于浏览器供应商如何计算宽度，但他们可能会将其用作指南。 - Jacob

好的链接。我会将其添加到我的答案中。 - Tim M.