指定CSS表格单元格的百分比宽度

Question

我尝试使用CSS显示创建基于HTML / CSS的周历：在每天对应的div上使用表格样式。当我指定日期div的百分比宽度大于17％时，div按预期填充整个屏幕（因为7 * 17％> 100％）。

jsfiddle here：http://jsfiddle.net/huDxZ/1/

但是，当我指定百分比宽度为16％或更小时，div的行为完全不同，仅占用页面宽度的一部分。

jsfiddle here：http://jsfiddle.net/DLjnH/

我希望我的每天div都有大约14％的宽度，所以它们大致填充页面的宽度并且具有相同的大小。不幸的是，14％的宽度看起来更糟。

jsfiddle here：http：//jsfiddle.net/YB5bY/

造成这种意外行为的原因是什么？它有什么办法吗？我需要明确指定宽度，因为最终我希望日历的日期在鼠标悬停时扩展。

请不要涉及花车的解决方案。

谢谢！

Answer 1

CSS规则百分比值始终相对于父级的相同属性的值 尝试向容器添加显式宽度：

#calendar {
    display: table;
    height:900px;
    width: 100%;
}

您可以使用14%作为“.day”元素：

<强> DEMO

Answer 2

我无法告诉您原因，但如果您强制容器div的宽度为100％，则两种情况的行为是相同的。

#calendar {
    display: table;
    height:900px;
    width: 100%;
}

更新版本：http://jsfiddle.net/DLjnH/1/

Answer 3

好吧，我可能会疯了，但我会用一张桌子来做这件事......

并非所有表格都是邪恶的，只是用于布局的表格......

Answer 4

您的表格单元格宽度是相对于父级宽度的，但父级是自动/未定义的。将width: 100%;添加到#calendar css定义中，以使其正常运行。