CSS table-cell equal width

Question

I have an indeterminate number of table-cell elements inside a table container   lt div style  quot display table  quot  gt     lt div style  quot display table-cell  quot  gt  lt  div gt     lt div style  quot display table-cell  quot  gt  lt  div gt   lt  div gt   Is there a pure CSS way to get the table-cells to be equal width even if they have differently sized content within them  Having a max-width would entail knowing how many cells you have I think

User · Accepted Answer

Here is a working fiddle with indeterminate number of cells: http://jsfiddle.net/r9yrM/1/

You can fix a width to each parent div (the table), otherwise it'll be 100% as usual.

The trick is to use table-layout: fixed; and some width on each cell to trigger it, here 2%. That will trigger the other table algorightm, the one where browsers try very hard to respect the dimensions indicated.
Please test with Chrome (and IE8- if needed). It's OK with a recent Safari but I can't remember the compatibility of this trick with them.

CSS (relevant instructions):

div {
    display: table;
    width: 250px;
    table-layout: fixed;
}

div > div {
    display: table-cell;
    width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

EDIT (2013): Beware of Safari 6 on OS X, it has table-layout: fixed; wrong (or maybe just different, very different from other browsers. I didn't proof-read CSS2.1 REC table layout ;) ). Be prepared to different results.

User · Answer

Here you go   http   jsfiddle net damsarabi gwAdA   You cannot use width  100px  because the display is table-cell  You can however use Max-width  100px  then your box will never get bigger than 100px  but you need to add overflow hidden to make sure the contect don t bleed to other cells  you can also add white-space  nowrap if you wish to keep the height from increasing

User · Answer

Just using max-width  0 in the display  table-cell element worked for me    x000D   x000D   table   x000D    display  table  x000D    width  100   x000D    x000D   x000D   table-cell   x000D    display  table-cell  x000D    max-width  0px  x000D    border  1px solid gray  x000D    x000D   lt div class  table  gt  x000D     lt div class  table-cell  gt short lt  div gt  x000D     lt div class  table-cell  gt loooooong lt  div gt  x000D     lt div class  table-cell  gt Veeeeeeery loooooong lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This can be done by setting table-cell style to width  auto  and content empty  The columns are now equal-wide  but holding no content   To insert content to the cell  add an div with css   position  absolute  left  0  top  0  right  0  bottom  0    You also need to add position  relative to the cells   Now you can put the actual content into the div talked above   https   jsfiddle net vensdvvb

User · Answer

this will work for everyone   x000D   x000D   lt table border  your val  cellspacing  your val  cellpadding  your val  role  grid  style  width 100   table-layout fixed  gt  x000D   lt  -- set the table td element roll attr to gridcell -- gt  x000D   lt tr gt  x000D   lt td roll  gridcell  gt  lt  td gt  x000D   lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    This will also work for table data created by iteration

User · Answer

Replace     lt div style  display table   gt       lt div style  display table-cell   gt  lt  div gt       lt div style  display table-cell   gt  lt  div gt     lt  div gt    with     lt table gt       lt tr gt  lt td gt content cell1 lt  td gt  lt  tr gt       lt tr gt  lt td gt content cell1 lt  td gt  lt  tr gt     lt  table gt    Look at all the issues surrounding trying to make divs perform like tables  They had to add table-xxx to mimic table layouts   Tables are supported and work very well in all browsers  Why ditch them  the fact that they had to mimic them is proof they did their job and well   In my opinion use the best tool for the job and if you want tabulated data or something that resembles tabulated data tables just work   Very Late reply I know but worth voicing

User · Answer

HTML   lt div class  table  gt       lt div class  table cell  gt Cell-1 lt  div gt       lt div class  table cell  gt Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2 lt  div gt       lt div class  table cell  gt Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3 lt  div gt       lt div class  table cell  gt Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4 lt  div gt   lt  div gt     CSS   table      display table      width 100       table-layout fixed     table cell      display table-cell      width 100px      border solid black 1px      DEMO

[html] CSS table-cell equal width

Examples related to html

Examples related to css

Examples related to html-table