Contents

Use Case

The use-case for this bit of functionality is pretty straightforward. Suppose you have a <tfoot> with a single <tr> with a single <td>, and you want that td element to automatically expand to the width of the whole table.

When executing the expandFooters() function defined previously, one would expect that the td reading "Should span all columns" would have its colspan attribute set to 3. And it does!

The resulting table looks like this:

Column A

Column B

Column C

Row 1, Col A

Row 1, Col B

Row 1, Col C

Row 2, Col A

Row 2, Col B

Row 2, Col C

Should span all columns

Introducing Border-Collapse

This works just fine until you set your table's border-collapse style to "collapse" like so:

<tableborder="1"style="border-collapse: collapse">
...
</table>

The expected outcome is a table which looks like this:

Column A

Column B

Column C

Row 1, Col A

Row 1, Col B

Row 1, Col C

Row 2, Col A

Row 2, Col B

Row 2, Col C

Should span all columns

However, the actual result looks like this:

Column A

Column B

Column C

Row 1, Col A

Row 1, Col B

Row 1, Col C

Row 2, Col A

Row 2, Col B

Row 2, Col C

Should span all columns

The auto-expanded td starts in the second column! Using JavaScript to read back the colspan value confirms that it's set correctly (to 3), but when rendered it appears as though it were set to one less and shifted to the right.

This happens regardless of the number of columns - it's always shifted one to the right.

Prevalence

I have tested this on Firefox 2.0.0.1 and 1.5.8, both of which display the issue. It's also a problem on the latest build of Seamonkey - which leads me to conclude that it's a bug in Gecko.

This does not occur in Opera or Internet Explorer 7. I have not tested on Safari.

Workaround

The obvious workaround is to just set the colspan before the DOM has finished loading, or at minimum, before the table has finished rendering. However, this requires that we clutter our otherwise clean HTML with inline <script> tags, or have prior knowledge of the number of columns at the HTML generation stage.

I hope to find a more elegant "non-invasive JavaScript" solution in the future, but at the current time I don't know of one. Simply setting the table's "display" style to "none" and then re-setting it back to "block" did not do the trick.