html - td 类，很困惑，数字越大宽度越小？

Question

这本身并不是真正的问题，但我想知道发生了什么，以便我能理解它。我目前正在编写一个新网站，该网站要求我在设计的页脚中使用一个表格。 (我不经常使用它们，但这张 table 让这个元素的生活变得更轻松。)

我正在为表格 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/

Answer 1

表格布局有它的粉丝和仇恨者，但有一点可以肯定，它是一种高级操作。这就像多种力量的结合，一些力量较弱，一些力量较强，最终决定了您的列宽。还有很多输入变量:

• 表格布局:是否固定
• 表格有特定的宽度(以像素或百分比为单位或根本没有)
• 是否所有列都有宽度？
• 表格中是否有colgroup元素？
• table 有多少可用空间？
• 是否有单元格包含不易损坏的内容？

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

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

还使用加起来不等于 100% 的百分比有点不确定。

我会退后一步，想想你到底想达到什么目的。