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

前端之家收集整理的这篇文章主要介绍了html – 指定CSS表格单元格的百分比宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用CSS显示创建一个基于HTML / CSS的周日历表:每天对应的div上的表格单元格样式。当我指定大于17%的天div的百分比宽度时,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/

是什么导致这个意想不到的行为?有什么办法吗?我需要明确指定宽度,因为最终我希望日历的日期在鼠标悬停上展开。

请,没有涉及浮标的解决方案。

谢谢!

解决方法

CSS规则百分比值始终相对于父项的相同属性的值。
尝试向容器添加显式宽度:
#calendar {
    display: table;
    height:900px;
    width: 100%;
}

您可以使用14%的“.day”元素:

DEMO

猜你在找的HTML相关文章