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

css display table cell requires percentage width

提问by UntitledGraphic

I've been put in a position where I need to use the display:table-cell command for div elements.

我已经处于需要对 div 元素使用 display:table-cell 命令的位置。

However I've discovered that the "cells" will only work correctly if a percentage is added to the width.

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

In this fiddle http://jsfiddle.net/NvTdw/when I remove the percentage width the cells do not have equal widths, however when a percentage value is added to the width all is well, but only when that percentage is equal to the proportion of max no of divs, so for four columns 25%, five 20% and in this case five at 16.666%.

在这个小提琴http://jsfiddle.net/NvTdw/ 中，当我删除百分比宽度时，单元格的宽度不相等，但是当将百分比值添加到宽度时一切都很好，但只有当该百分比等于最大 div 的比例，因此对于四列 25%，五列 20%，在这种情况下，五列是 16.666%。

I thought maybe adding a percentage of less - say 1% would be a good fix all, but the cells fall out of line again.

我想也许添加更少的百分比 - 比如说 1% 将是一个很好的解决方案，但细胞再次脱离线。

Why is this?

为什么是这样？

    .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>

回答by André Junges

You just need to add 'table-layout: fixed;'

你只需要添加'table-layout: fixed;'

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

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

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

回答by cssyphus

Note also that vertical-align:top;is often necessary for correct table cell appearance.

另请注意，这vertical-align:top;对于正确的表格单元格外观通常是必要的。

css table-cell, contents have unnecessary top margin

css table-cell，内容有不必要的上边距