67

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

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

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

我想可能会增加一个百分比 - 比如说 1% 将是一个很好的解决方案，但细胞再次脱节。

为什么是这样？

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

4

2 回答 2

118

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

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

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

于 2013-11-07T11:42:56.933 回答
1

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

css 表格单元格，内容有不必要的上边距

于 2015-07-31T17:19:03.097 回答