Firefox Colspan Border-Collapse Bug

From Jimbojw.com

Jump to: navigation, search

In trying to create auto-expanding <td> elements, I found a bug in Gecko's rendering of table-cells when colspan is dynamically assigned and the table has its border-collapse style set to "collapse".

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.

One might attempt to do this with JavaScript like so:

function expandFooters() {
    var tables = document.getElementsByTagName('table');
    for (var i=0; i<tables.length; i++) {
        var table = tables[i];
        var cols = table.getElementsByTagName('thead')[0].getElementsByTagName('th').length;
    table.getElementsByTagName('tfoot')[0].getElementsByTagName('td')[0].colSpan = cols;
    }
}

When executed, the expandFooters() method seeks out all tables in the DOM, and for each, finds the last td (the on in the tfoot) and sets its colspan to match the number of th elements in the thead.

Example Table

Suppose you have a table in your page like this:

<table border="1">
<thead>
<tr>
    <th>Column A</th>
    <th>Column B</th>
    <th>Column C</th>
<tr>
</thead>
<tr>
    <td>Row 1, Col A</td>
    <td>Row 1, Col B</td>
    <td>Row 1, Col C</td>
</tr>
<tr>
    <td>Row 2, Col A</td>
    <td>Row 2, Col B</td>
    <td>Row 2, Col C</td>
</tr>
<tfoot>
<tr>
    <td>Should span all columns</td>
</tr>
</tfoot>
</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:

<table border="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.

Comments

Leave a comment
Sorry, comments are disabled.

or, read what others have said ...