Table: repercussions of td spanning more cols than actually exist

Question

Project I have to work with uses a lot of tables that can have an arbitrary number of columns hidden and a 'footer' td cell will span a fixed amount of them. So if a table has 10 cols, 2 are hidden ('display:none') and the last row has a cell spanning 10. ( sample fiddle here ).

I've grumbling at this because it's 'wrong' and now I find myself doing exactly the same thing as a trade-off since for practical reasons. So I've looked at the fiddle xross browser and it seems to 'work' okay (IE7 included which I have to support).

What are the possible repercussions of such practice?

<style type="text/css">
.hidden{ display:none; }
</style>
<table border="1">

<tr>
    <td class="header"> header 1</td>
    <td class="header hidden"> header 2</td>
    <td class="header"> header 3</td>
    <td class="header"> header 4</td>
</tr>

<tr>
    <td class="cell"> cell 1</td>
    <td class="cell hidden"> cell 2</td>
    <td class="cell"> cell 3</td>
    <td class="cell"> cell 4</td>
</tr>


<tr>
    <td colspan="4">
        odd ball
    </td>
</tr>
</table>

Formally, it's impossible that a td spans more columns than actually exist, because the table calculates what the number of columns is from the colspan attributes! So if you have one row with colspanned columns like these, the other rows will be that wide too, with implicit, hidden, cells at the end of the row. Formally. (However, I'm not sure if all browsers handle that the same way.) — Mr Lister

BennyLava BennyLava · Accepted Answer · 2012-10-31T13:03:51

This is not an answer to your question, but more like an "answer".

I had the same challenge creating a form with alot of hidden cells/rows in a table, and I felt that I lost some control using tables, so I made the table out of divs instead. With divs I have complete control over what happens when something is hidden or not.

Table: repercussions of td spanning more cols than actually exist

1 Answers