Adding text to an empty table cell changes its width

Question

Can someone explain what is happening here? http://jsfiddle.net/BeQmw/2

I've got two tables, each with two rows and two cells. Each cell has different background colors so you can see their widths. The only difference between the two tables is that the second table has a + character in the first cell of the second row. But when this happens, the cells in the column containing the + become much wider.

Is there a good reason for why the HTML does that? Is there a way to specify that all cells have same width?

Answer 1

By default, <table> has table-layout set to auto. This setting causes browsers to calculate the layout of table cells based on the content of the cells (i.e. a cell with content is affected differently than one without it). I'm not sure exactly what that algorithm is, but if you don't specify the width=100% on the <table> elements it appears that the empty table cells have a 1 or 2 pixel width that apparently gets multiplied by the full width of the table. This continues to decrease as you add content to the first table cell, but it increases with content in the second.

I'll cut to the chase and say that table-layout: fixed does not depend on cell contents and calculates the width of the table cells based on specified width <col>s, borders, and cell spacing. (Specification) You can see this in action: http://jsfiddle.net/ExplosionPIlls/BeQmw/3/

The spec goes on to talk about table-layout: auto and actually says:

UAs are not required to implement this algorithm...

so no specific widths of the table cells are guaranteed.