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

Question

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.

Answer 1

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).

Answer 2

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.