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

css, html, html-table

Solution

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

Problem

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.

Original source