CSS table-cell equal width

Question

I have an indeterminate number of table-cell elements inside a table container.

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell;"></div>
</div>

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?

Burglary

How is the number of columns determined: client or server side? – Dib

After I tried some methods, I think if you want to have multiple rows and want them of equal width, use flexbox instead of table – Caldwell

Answer 1

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.

Bayern

Thanks, this seems like the answer. I don't know why but if I set the width to 2% it actually scrunges up each column into 2%. But 100% seems to work great. Any idea what's going on there? – Burglary

I ran into the same issue of needing to use 100% width on the table-cells. This was happening because of a clearfix applied to the parent element with display: table. As 100% width cells doesn't work in IE8, the fix for me was to remove the clearfix. Hopefully this helps someone. – Starknaked

To expand on this, this works for simple layouts (1x1, 2x2, 3x3, etc) but complex layouts (1x3x1, 1x2x3x4, etc) require additional divs with display:table to be used as if they were rows, not display:tabl-row as some might expect. Example here. – Huntress

100% width didn't work on IE8 (surprise) but the initial suggestion for 2% provides the correct results. – Discontinuity

100% width also didn't work on IE9. It only showed the first cell. Changing to 1% fixed that, and didn't seem to break things in Chrome or Firefox. – Vinia

100% width also didn't work in IE10. It did work in IE11. And 1% width made Mobile Safari show super narrow columns. So I ended up using a CSS hack targeting IE9 and IE10: .my-cell { width: 100%; }; @media screen and (min-width:0\0) { .my-cell { width: 1%; } } The CSS hack is from here: https://mcmap.net/q/145412/-how-to-add-css-hack-specifically-for-ie10 – Vinia

When I tried this, I found that setting width: 100% on the <td>s is unnecessary. (I use Firefox 93.0.) – Equitation

Answer 2

HTML

<div class="table">
  <div class="table_cell">Cell-1</div>
  <div class="table_cell">Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2</div>
  <div class="table_cell">Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3</div>
  <div class="table_cell">Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4</div>
</div>​

CSS

.table{
  display:table;
  width:100%;
  table-layout:fixed;
}
.table_cell{
  display:table-cell;
  width:100px;
  border:solid black 1px;
}

DEMO.

Mccloskey

The fiddle doesn't work here. The cells are always 25%. – Cumin

This solution isn't very scalable for anything dynamic, such as site navigation controlled by the client. – Disproportionation

Probably you are right and btw, it's nearly two years old anser @QuantumDynamix. Have anything better on mind ? Why not just share your idea, let the world know better things :-) – Mccloskey

Answer 3

Just using max-width: 0 in the display: table-cell element worked for me:

.table {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  max-width: 0px;
  border: 1px solid gray;
}

<div class="table">
  <div class="table-cell">short</div>
  <div class="table-cell">loooooong</div>
  <div class="table-cell">Veeeeeeery loooooong</div>
</div>

Taproom

Just nitpicking here, but 0px isn't a valid unit. It should just be 0. – Crumpled

This worked for me, but could you explain how does this work ? – Forge

This works, and is the simplest form that doesn't necessitate a fixed width to be pre-set on the cell. – Lorrainelorrayne

Answer 4

Replace

  <div style="display:table;">
    <div style="display:table-cell;"></div>
    <div style="display:table-cell;"></div>
  </div>

with

  <table>
    <tr><td>content cell1</td></tr>
    <tr><td>content cell1</td></tr>
  </table>

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.

Lecher

+1 because it works and because CSS still, in 2014 does not do this correctly across all browsers. – Auten

Sometimes you want table-like layout for things that are not tablulated data. e.g. navigation elements which should use <nav>, <ul>, etc. – Electrodynamometer

For responsive it is ideal to have a div based layout. Displaying tables in mobile devices is a pain in the ass. – Relator

Trying to emulate a table precludes responsive design. I agree if you want responsive design, tables are not the choice. – Lecher

Tables were created for displaying tabular data: it was, it is and it'll be the HTML elements to use to display tabular data, why would anybody ditch them (for that purpose)? Table layout isn't mimicked: it's been part of CSS2 recommandation for a while now and it happens that default layout of HTML tables is display: table-etc (quite naturally). I don't spend my days making links mimicking divs or divs mimicking tables, spans or inputs: I'm just using CSS for styling. Finally, good luck with IE9 for applying any other value of display property to table, tr, td elements. – Bayern

Answer 5

this will work for everyone

<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">
<!-- set the table td element roll attr to gridcell -->
<tr>
<td roll="gridcell"></td>
</tr>
</table>

This will also work for table data created by iteration

Malony

Answer 6

To work with padding only between cells and still have same cell widths, this works for this html

<div class="image-table-wrapper">
    <table class="image-table">
         <tr>
             <td width="33.3333333%"><img src="..." /></td>
             <td width="33.3333333%"><img src="..." /></td>
             <td width="33.3333333%"><img src="..." /></td>
         </tr>
    </table>
</div>

If padding in cells is 5px:

.image-table-wrapper {
    /**
     * To remove any overflowing border or background color
     * In many cases this is not necessary
     */
    overflow-x: hidden;
    border: 1px solid black; /** move the border from the table to the wrapper if wanted */
}
.image-table {
    margin-left: -5px;
    width: calc(100% + 10px);
}
.image-table td {
    padding-left: 5px;
    padding-right: 5px;
}
img {
    max-width: 100%;
}

This actually just moves the outer padding outside of the parent. This will not look good when a visible part of the table would be outside of the box, like a border or a background color. But then you can add overflow-x: hidden; on the parent

Staceestacey

Answer 7

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/

Retrorocket

Answer 8

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.

Syndesmosis