Responsive tables and complex headers

Ian Dickinson

I have a table with complex headers (i.e. the thead contains two tr elements so that I can use some colspan and rowspan attributes). Some of the table columns are hidden so that I can sort on them without displaying them. In order to not show a "flash of unstyled content", I wrap a div.hidden around the table and remove the .hidden class when my code has finished adding data to the table. All of this is working great.

Now, however, I want to make the table responsive. Here I run into problems because the class logic breaks when the table has an available width of zero, which it does because at the point the class logic is running, the table is in a hidden div. If I remove the div.hidden, the responsive logic works just fine but the user briefly sees the hidden columns before the table draw is complete.

So: I have to do the table header layout in code because of the complex header. If I keep the table hidden, the user never sees the non-visible columns but the responsive logic doesn't work. If I don't hide the table, responsive works but I get a FOUC.

I realise I've probably painted myself into a corner with too many constraints, but any suggestions?

Thanks,
Ian