Html 指定 CSS 表格单元格的百分比宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9463986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Specifying percentage width for CSS table cells
提问by Dylan
I'm trying to create an HTML/CSS-based week calendar using CSS display:table-cell styling on the divs corresponding to each day. When I specify a percent width for the day divs that is greater than 17%, the divs fills the whole screen as expected (since 7*17% > 100%).
我正在尝试在对应于每一天的 div 上使用 CSS display:table-cell 样式创建一个基于 HTML/CSS 的周历。当我为一天 div 指定大于 17% 的百分比宽度时，div 会按预期填充整个屏幕（因为 7*17% > 100%）。
jsfiddle here: http://jsfiddle.net/huDxZ/1/
jsfiddle在这里：http: //jsfiddle.net/huDxZ/1/
However, when I specify a percent width that is 16% or less, the divs behave entirely differently, taking up only part of the page width.
但是，当我指定 16% 或更少的百分比宽度时，div 的行为完全不同，仅占用页面宽度的一部分。
jsfiddle here: http://jsfiddle.net/DLjnH/
jsfiddle在这里：http: //jsfiddle.net/DLjnH/
I would like my day divs to each have widths of about 14% so they roughly fill the width of the page and have equal sizes. Unfortunately, a width of 14% looks even worse.
我希望我的日常 div 的宽度约为 14%，因此它们大致填充页面的宽度并具有相同的大小。不幸的是，14% 的宽度看起来更糟。
jsfiddle here:http://jsfiddle.net/YB5bY/
jsfiddle在这里：http://jsfiddle.net/YB5bY/
What is causing this unexpected behavior? Is there any way around it? I need to explicitly specify widths because eventually I would like the days of the calendar to expand on mouseover.
是什么导致了这种意外行为？有什么办法可以解决吗？我需要明确指定宽度，因为最终我希望日历的天数在鼠标悬停时扩展。
Please, no solutions involving floats.
拜托，没有涉及浮动的解决方案。
Thanks!
谢谢！
采纳答案by Didier Ghys
CSS rules percentage values is always relative to the value of the same property of the parent.
Try adding an explicit width to the container:
CSS 规则百分比值总是相对于父级相同属性的值。
尝试向容器添加显式宽度：
#calendar {
display: table;
height:900px;
width: 100%;
}
The you can use 14%for the ".day" elements:
您可以14%用于“.day”元素：
回答by Rui Carneiro
I cannot tell you the reason but if you force the container divto have 100% width the behaviors of the two cases are identical.
我不能告诉你原因，但如果你强制容器div具有 100% 的宽度，两种情况的行为是相同的。
#calendar {
display: table;
height:900px;
width: 100%;
}
Updated version: http://jsfiddle.net/DLjnH/1/
更新版本：http: //jsfiddle.net/DLjnH/1/
回答by Madara's Ghost
Well, I may be crazy, but I would use a table for such a thing...
好吧，我可能疯了，但我会用一张桌子来做这样的事情......
Not all tables are evil, just the ones used for layout...
并非所有表格都是邪恶的，只是用于布局的表格......
回答by kontur
Your table cell widths are relative to the parents width, yet the parents with is auto/undefined. Add width: 100%;to your #calendarcss definition for them to behave correctly.
您的表格单元格宽度相对于父宽度，但父宽度是自动/未定义的。添加width: 100%;到您的#calendarcss 定义中，让它们正确运行。
