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    x000D   x000D       table   x000D        display  table  x000D        height  200px  x000D        width  100   x000D        x000D   x000D       cell   x000D        display  table-cell  x000D        height  100   x000D        padding  10px  x000D        width  16 666   x000D        x000D   x000D       grey   x000D        background-color   666  x000D        height  100   x000D        text-align  center  x000D        font-size  48px  x000D        color   fff  x000D        font-family   Helvetica Neue   Helvetica  Arial  sans-serif  x000D        font-weight  300  x000D        x000D   lt div class  table  gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt Block one lt  div gt  x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt Block two lt  div gt  x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt Block three lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  table  gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt Block lt  div gt  x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt Block two lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  table  gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt Block one lt  div gt  x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt Block two lt  div gt  x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt Block three lt  div gt  x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt Block four lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  table  gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt x lt  div gt  x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt xx lt  div gt  x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt xxx lt  div gt  x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt xxxx lt  div gt  x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt xxxxxx lt  div gt  x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt Block five test lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  table  gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt Block lt  div gt  x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt Block two lt  div gt  x000D     lt  div gt  x000D     lt div class  cell  gt  x000D       lt div class  grey  gt Block three lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Accepted Answer

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

User · Answer

Note also that vertical-align top  is often necessary for correct table cell appearance   css table-cell  contents have unnecessary top margin

[html] css display table cell requires percentage width

The answer is

Examples related to html

Examples related to css

Examples related to css-tables

Tags