指定CSS表格单元格的宽度百分比
指定CSS表格单元格的宽度百分比
提问于 2012-02-27 19:10:22
我正在尝试使用CSS display创建一个基于HTML/CSS的周日历:在对应于每一天的div上使用表格单元格样式。当我为day div指定一个大于17%的百分比宽度时，div会按预期填充整个屏幕(因为7*17% > 100%)。
jsfiddle这里：http://jsfiddle.net/huDxZ/1/
但是，当我指定16%或更小的百分比宽度时，div的行为完全不同，只占用页面宽度的一部分。
jsfiddle这里：http://jsfiddle.net/DLjnH/
我希望我的day div每个都有大约14%的宽度，这样它们就可以大致填满页面的宽度，并具有相同的大小。不幸的是，14%的宽度看起来更糟糕。
jsfiddle这里：http://jsfiddle.net/YB5bY/
是什么导致了这种意外行为？有什么办法可以绕过它吗？我需要显式地指定宽度，因为最终我希望日历的日期在鼠标经过时展开。
请不要使用涉及浮点的解决方案。
谢谢!
回答 3
Stack Overflow用户
发布于 2012-02-27 19:15:53
我不能告诉你原因，但是如果你强制容器div有100%的宽度，这两种情况的行为是相同的。
#calendar {
display: table;
height:900px;
width: 100%;
}Stack Overflow用户
发布于 2012-02-27 19:13:11
好吧，我可能是疯了，但我会用桌子来做这样的事情...
并不是所有的表格都是邪恶的，只是那些用于布局的表格。
Stack Overflow用户
发布于 2012-02-27 19:18:56
表格单元格的宽度与父项的宽度相关，但父项是自动/未定义的。将width: 100%;添加到您的#calendar css定义中，以使它们正确运行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9463986
复制相关文章
相似问题