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/

Answer 1

我可以看到表格单元格中行为在10到20％之间切换。

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

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

如果桌子本身没有宽度，浏览器会根据内容显示如何显示单元格。我不确定为什么当百分比被设置为更大的数字时它选择更小的宽度，但这是一个非确定性的计算，因此浏览器可以自由地做它想做的事情（参见下面的规范）

换句话说，如果表格没有宽度，则告诉浏览器每个单元格是可自由确定的变量值的10％。

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

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

该算法反映了几个流行的HTML用户的行为代理人在撰写本规范时。 UAs不是必需的实现此算法以确定案例中的表格布局 'table-layout'是'auto';他们甚至可以使用任何其他算法如果它导致不同的行为。

UA应该尝试使用所要求的百分比，但可能并非总是如此。

列宽的百分比值是相对于表格宽度的。如果表格具有“width：auto”，则百分比表示约束在列的宽度上，UA应该尝试满足。（明显，这并不总是可行的：如果列的宽度是'110％'，那么约束不能满足。）

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

我很想知道更好的解释。

Answer 2

桌面布局有它的粉丝和仇恨，但有一点是肯定的，它是高级机动。它就像力量的组合，一些更弱，一些更强，最终决定你的列宽。并且有很多输入变量：

table-layout：固定与否
表格具有特定宽度（以像素或百分比表示或根本不存在）
所有列都有宽度吗？
表格中是否有colgroup元素？
桌子有多少空间？
任何细胞都有不易破碎的内容吗？

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

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

同样使用不等于100％的百分比是一种未定义的。

我退后一步，想想你正在努力实现的目标。

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

2 个答案: