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.
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-layoutto work the table styled element must have a width set (100% in my example).