Zostałem umieszczony w miejscu, w którym muszę użyć polecenia display: table-cell dla elementów div.

Jednak odkryłem, że „komórki” będą działać poprawnie tylko wtedy, gdy procent zostanie dodany do szerokości.

W tym skrzydlehttp://jsfiddle.net/NvTdw/ kiedy usuwam szerokość procentową, komórki nie mają jednakowych szerokości, jednak gdy wartość procentowa jest dodawana do szerokości, wszystko jest dobrze, ale tylko wtedy, gdy procent ten jest równy proporcji maksimum nie, więc dla czterech kolumn 25% , pięć 20%, aw tym przypadku pięć na 16,666%.

Pomyślałem, że dodanie procentu mniejszego - powiedzmy, że 1% byłoby dobrym rozwiązaniem, ale komórki znów wypadają z linii.

Dlaczego to?

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