Html td类，非常混乱，数字越大宽度越小？

这本身并不是一个真正的问题，但我想知道发生了什么，这样我才能理解它。我目前正在编写一个新网站，它要求我在设计的页脚中使用一个表。（我不经常使用它们，但这个表只是让这个项目的生活更轻松。）

我正在为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>​

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

注意事项：

<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>​

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

• 当百分比小于24时，会发生奇怪的行为：从15到23，总宽度减小，从23到24，总宽度突然扩大。对于高于24的百分比，您的行为正常
• 不管您是为表指定最大宽度还是仅指定宽度
• 这个问题可以在chrome、firefox、opera和IE9中重现
• 请点击此处：

---

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

将宽度添加到表本身（而不是包含

DIV

）会更改行为：

如果表格本身没有宽度，浏览器会根据单元格内容猜测如何显示单元格。我不确定当百分比设置为较大的数字时，为什么它选择较小的宽度，但这是一个不确定的计算，因此浏览器可以自由地执行它想要的操作（请参见下面的规范）

换言之，如果表上没有宽度，您就告诉浏览器每个单元格都是可以自由确定的变量值的10%

另一个考虑因素可能是该表有5个单元格。将每个设置为10%将导致总宽度仅为50%。同样，浏览器必须猜测总宽度，但也必须确定如何处理未考虑的剩余50%

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

该算法反映了几种流行的HTML用户的行为 代理编写本规范。无人机不需要 实现此算法以确定案例中的表布局 “表格布局”是“自动”的；他们甚至可以使用任何其他算法 如果它导致不同的行为

UA应该尝试使用所请求的百分比，但这可能并不总是可能的

列宽的百分比值相对于表格宽度。 如果表格具有“宽度：自动”，则百分比表示约束 列的宽度，UA应尽量满足该宽度。（显然， 这并不总是可能的：如果列的宽度为“110%”，则 无法满足约束。）

---

我想知道一个更好的解释。

桌子布局有它的粉丝和憎恨者，但有一件事是肯定的，那就是它是一种先进的策略。这就像是力量的组合，一些较弱，一些较强，最终决定了你的列宽。还有很多输入变量：

• 表布局：固定或不固定
• 表格具有特定宽度（以像素或百分比为单位，或根本不以像素为单位）
• 所有列都有宽度吗
• 表中是否有colgroup元素
• 这张桌子有多少空间
• 是否有任何单元格包含不可拆分的内容

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

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

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

---

我会退后一步，想想你到底想实现什么。

你能发布html和css让我们看看吗？分享这些代码片段非常方便，但请在这里发布代码，而不仅仅是在JS Fiddle上。用于布局的表格确实不会让生活变得更轻松（除非您为电子邮件客户端编写代码）。现在我正确地理解了问题，我无法理解发生了什么。我将为你的问题添加注释并删除我的答案。对于这样的一行表格，我建议改为列表，就像在简单菜单中一样。删除列表样式类型，并浮动li，就可以了。如果需要表格单元格行为，您甚至可以放置display:table单元格。固定宽度和自动宽度在规范中有不同的推荐算法；这基本上是由浏览器供应商决定如何计算宽度，但他们可能会以此作为指导。好链接。我将把它添加到我的答案中。20%是我的目标宽度除以5=100%，宽度由约束最大宽度定义：1080px；请不要把我当成一个没有经验的表格用户，我建立了很多网站，但它仍然是标准的做法，只是使用表格。我没有将宽度应用于表本身的原因是，我在通过w3c验证代码时遇到了一个错误，该错误表示表中的宽度元素正在逐步淘汰，我应该使用css来控制宽度，所以我就是这么做的。也许我看错了