Equal sized table cells to fill the entire width of the containing table

98
votes

Is there a way using HTML/CSS (with relative sizing) to make a row of cells stretch the entire width of the table within which it is contained?

The cells should be equal widths and the outer table size is also dynamic with <table width="100%">.

Currently if I don't specify a fixed size; the cells just autosize to fit their contents.

4
htmlcsshtml-table

4 Answers

151
votes

You don't even have to set a specific width for the cells, table-layout: fixed suffices to spread the cells evenly.

ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: 1px solid hotpink;
    vertical-align: middle;
    word-wrap: break-word;
}
<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz</li>
</ul>

Note that for table-layout to work the table styled element must have a width set (100% in my example).

115
votes

Just use percentage widths and fixed table layout:

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
</table>

with

table { table-layout: fixed; }
td { width: 33%; }

Fixed table layout is important as otherwise the browser will adjust the widths as it sees fit if the contents don't fit ie the widths are otherwise a suggestion not a rule without fixed table layout.

Obviously, adjust the CSS to fit your circumstances, which usually means applying the styling only to a tables with a given class or possibly with a given ID.

5
votes

Using table-layout: fixed as a property for table and width: calc(100%/3); for td (assuming there are 3 td's). With these two properties set, the table cells will be equal in size.

Refer to the demo.

1
votes

Just put this lines to your table style:

#table_name{
    table-layout: fixed;
    width: 100%;
}

You have a good example on this codepan.

This is late answer, but it will help for future searches.