css显示表格单元格需要百分比宽度

我已经放在一个位置，我需要使用display：table-cell命令来显示div元素。

但是我发现“单元格”只有在百分比被添加到宽度时才能正常工作。

在这个小提琴http://jsfiddle.net/NvTdw/当我删除百分比宽度单元格不具有相同的宽度，但是当一个百分比值被添加到宽度一切都很好，但只有当该百分比等于最高不得超过四分之二的比例，四柱25％，五20％，五柱16.666％。

我想可能会增加一个百分比 – 比如说1％将是一个很好的解决scheme，但是这些单元格会再次失败。

为什么是这样？

.table { display: table; height: 200px; width: 100%; } .cell { display: table-cell; height: 100%; padding: 10px; width: 16.666%; } .grey { background-color: #666; height: 100%; text-align: center; font-size: 48px; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; } 

 <div class="table"> <div class="cell"> <div class="grey">Block one</div> </div> <div class="cell"> <div class="grey">Block two</div> </div> <div class="cell"> <div class="grey">Block three</div> </div> </div> <div class="table"> <div class="cell"> <div class="grey">Block</div> </div> <div class="cell"> <div class="grey">Block two</div> </div> </div> <div class="table"> <div class="cell"> <div class="grey">Block one</div> </div> <div class="cell"> <div class="grey">Block two</div> </div> <div class="cell"> <div class="grey">Block three</div> </div> <div class="cell"> <div class="grey">Block four</div> </div> </div> <div class="table"> <div class="cell"> <div class="grey">x</div> </div> <div class="cell"> <div class="grey">xx</div> </div> <div class="cell"> <div class="grey">xxx</div> </div> <div class="cell"> <div class="grey">xxxx</div> </div> <div class="cell"> <div class="grey">xxxxxx</div> </div> <div class="cell"> <div class="grey">Block five test</div> </div> </div> <div class="table"> <div class="cell"> <div class="grey">Block</div> </div> <div class="cell"> <div class="grey">Block two</div> </div> <div class="cell"> <div class="grey">Block three</div> </div> </div> 

Answer 1

你只需要添加'table-layout：fixed'

 .table { display: table; height: 100px; width: 100%; table-layout: fixed; } 

http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Answer 2

还要注意vertical-align:top; 通常需要正确的表格单元格外观。

CSS表格，内容有不必要的上边缘