5

这不是一个真正的问题，但我想知道发生了什么，所以我可以理解它。我目前正在编写一个新网站，该网站要求我在设计的页脚中使用一个表格。（我不经常使用它们，但这张表只是让这个项目的生活变得更轻松。）

我正在为表 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 的百分比，您的行为正常。
  • 为表格指定 max-width 还是仅指定宽度都没有关系
  • 该问题可在 chrome、firefox、opera 和 IE9 中重现
  • jsFiddle在这里：http: //jsfiddle.net/BPygA/
4

2 回答 2

2

表格布局有其拥护者和仇恨者，但可以肯定的是，它是一种高级策略。这就像力量的组合，一些较弱，一些更强，最终决定了您的列宽。并且有很多输入变量：

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

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

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

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

我会退后一步，想想你想要达到的目标。

于 2012-04-11T00:27:14.703 回答
1

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

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

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

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

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

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

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

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

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

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

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

我会很好奇更好的解释。

于 2012-04-10T23:42:31.453 回答