爲CSS表格單元格指定百分比寬度

Question

我正在嘗試使用CSS顯示來創建基於HTML/CSS的星期日曆：表格單元格樣式對應於每天的div。當我指定日間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/

是什麼原因造成這個意外的行爲？有沒有辦法解決它？我需要明確指定寬度，因爲最終我希望日曆的日子在mouseover上展開。

請不要涉及浮動解決方案。

謝謝！

Answer 1

CSS規則百分比值總是相對於父級的相同屬性的值。
嘗試添加一個明確的寬度和容器：

#calendar { 
    display: table; 
    height:900px; 
    width: 100%; 
} 

的，你可以使用14%的「天」的元素：

DEMO

Answer 2

好吧，我可能是瘋了，但我會用一臺這樣的事情......

並非所有的表都是邪惡的，只是用於佈局的...

Answer 3

我不能告訴你的原因，但如果您強制容器div具有100％的寬度，這兩種情況的行爲是相同的。

#calendar { 
    display: table; 
    height:900px; 
    width: 100%; 
} 

更新版本：http://jsfiddle.net/DLjnH/1/

Answer 4

你的表格單元格的寬度是相對於父母的寬度，還與父母爲自動/不確定。將width: 100%;添加到您的#calendar css定義中，以便它們的行爲正確。