html - 指定大于 7% 的值会使列宽不均匀。有人可以解释为什么吗？

Question

这是有问题的页面:

http://codepen.io/virtuoso/pen/uyckh

在页面底部，有三个DIV(Content 1、Content 2、Content 3)，display:table-cell 和width: 1%。我有两个关于它们的问题:

1. 虽然宽度是1%，但是每一个都占据了容器宽度的1/3。为什么？

2. 如果我将 width 更改为 50%，前两个单元格会展开以覆盖大约 80% 的容器并且宽度相同，而第三个变得非常狭窄。如果 width 设置为 100%，第一个单元格变为 80% 宽，其他两个现在宽度相同并占据剩余空间。为什么会有这种奇怪的行为？我期望所有三个 DIV 在所有情况下都同样宽。这里发生了什么？

Answer 1

1 - 默认情况下，表格单元格(或显示为它们的元素)将完全填充其容器，因此为它们分配宽度可能被视为“相对”分配，而不是标准的“绝对”分配。因此，如果它们的宽度总和小于 100%，它们将共享剩余的宽度。

2 - 同样在这里，如果它们的总宽度超过 100%，它们将尝试占用所有可用空间(从第一个 td 开始，然后是第二个，依此类推)。他们没有实现“overflow:hidden”CSS 属性这一事实意味着第三个 TD(应该使用可用宽度的剩余 0% 的那个)将仅显示以包装其内容。