Элемент css display table требует процентной ширины

Я был помещен в позицию, где мне нужно использовать команду display: table-cell для элементов div.

Однако я обнаружил, что "ячейки" будут работать только правильно, если процент добавляется к ширине.

В этой скрипте http://jsfiddle.net/NvTdw/, когда я удаляю процентную ширину, ячейки не имеют одинаковой ширины, однако когда процентное значение добавляется к ширина все хорошо, но только тогда, когда этот процент равен пропорции max no divs, поэтому для четырех столбцов 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>