Question

I’m making a table with:

• days as columns
• times as rows
• and the table data will be empty, styled anchors (changing between dots, lines and blocks).

When the display gets down to tablet/mobile size I want hide all but one of the days (columns).

As I understand it, as it is very obviously a table, I should probably use the table element. However hiding/styling tables/columns is problematic. I’d like to steer away from applying a column class to each td and I probably need to support ie8 so nth-child is out of the loop and col is too limited for the styling I need to do http://www.quirksmode.org/css/columns.html.

So my question is; should I pursue the applying classes to td’s or what is the most semantic alternative?

Edit:

I think I’ve decided to go with nested ul’s. I’m sure semantically it’s not correct but in terms maintainability I think using tables would nigh on impossible

Answer 1

Think you are unlucky. Just add a class to all the td’s in a column. This is the best backwards compatible solution there is.

Here you can read all about ‘ways to hide first column‘ on Stack Overflow.