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

发布时间：2020-12-14 21:46:22 所属栏目：资源来源：网络整理

导读：我正在尝试使用CSS显示创建一个基于HTML / CSS的周日历表：每天对应的div上的表格单元格样式。当我指定大于17％的天div的百分比宽度时，div将按预期填充整个屏幕(因为7 * 17％ 100％)。 jsfiddle在这里：http://jsfiddle.net/huDxZ/1/ 但是，当我指定百分比

我正在尝试使用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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!