Question

If I specify a width for a <th> element in a table, what does that mean in terms of the wider table if table-layout is not specified and defaults to automatic? Does such a width specify a minimum width for the entire column? If so, where is this specified – I cannot find anything in the HTML/CSS specs that says width is interpreted this way, yet Firefox and IE both seem to interpret the width this way.

To put this in context, imagine a table of numeric data (e.g. production volumes) for the days of the week. The week days are the column headings. I want to cope with two conditions:

• There is no data for a particular day, but I don’t want the width of the column to collapse to some ugly minimum. Rather, I want to set that minimum.
• When there are large numbers in columns, I want the width of the column to automatically expand to show the number in full.

When I specify a bunch of column widths as follows…

<tr>
<th style="width:3em">Sun</th>
<th style="width:3em">Mon</th>
<th style="width:3em">Tue</th>
...etc
</tr>

… I achieve the result I’m looking for. However, can I rely on this?

Answer 1

Yes, you can rely on this; it’s in the CSS spec, and browsers play by the book here. For table cells, the width property sets the minimum width used in the calculation of column width.

The spec is somewhat messy here, because the description of the width property does not say this or even refer to the description (as far as I can see), but this is described in section 17.5.2.2 Automatic table layout. Item 1 in the first numbered list there says: “Calculate the minimum content width (MCW) of each cell: the formatted content may span any number of lines but may not overflow the cell box. If the specified ‘width’ (W) of the cell is greater than MCW, W is the minimum cell width. A value of ‘auto’ means that MCW is the minimum cell width.”