css display table cell requires percentage width

Question

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

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

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

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>

Answer 1

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

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

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