Equal sized table cells to fill entire width of holding table.

Question

Hey guys, I guess the title sort of explains what I am trying to achieve;

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

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

Thanks!

Answer 1

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.

Answer 2

Make sure the percentages add up to (or close to) 100% :D