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

Question

我正在尝试使用CSS显示创建基于HTML/CSS的周历:在每天对应的div上使用table-cell样式.当我指定日期div的百分比宽度大于17%时,div按预期填充整个屏幕(因为7*17%> 100%).

jsfiddle在这里:http://jsfiddle.net/huDxZ/1/

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

jsfiddle:http://jsfiddle.net/DLjnH/

我希望我的每天div都有大约14%的宽度,所以他们大致填充页面的宽度,并具有相同的大小.不幸的是,14%的宽度看起来更糟糕.

jsfiddle在这里: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%;到您的#calendarcss定义,以使它们正常运行.