title: css display table cell requires percentage width
body: <p>I've been put in a position where I need to use the display:table-cell command for div elements.</p>
  
  <p>However I've discovered that the "cells" will only work correctly if a percentage is added to the width.</p>
  
  <p>In this fiddle <a href="http://jsfiddle.net/NvTdw/" rel="noreferrer">http://jsfiddle.net/NvTdw/</a> 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%.</p>
  
  <p>I thought maybe adding a percentage of less - say 1% would be a good fix all, but the cells fall out of line again.</p>
  
  <p>Why is this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .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;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table"&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;Block one&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;Block two&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;Block three&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="table"&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;Block&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;Block two&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="table"&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;Block one&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;Block two&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;Block three&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;Block four&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="table"&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;x&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;xx&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;xxx&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;xxxx&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;xxxxxx&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;Block five test&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="table"&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;Block&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;Block two&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &lt;div class="grey"&gt;Block three&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>