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?

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