May 01
A simple CSS Technique for Showing and Hiding Table Columns
Yes, yes, I know. You see the word “table” in the post title, and you’re ready to run away yelling about Web 2.0, CSS, semantic HTML, and the overuse of tables for layout.
Don’t worry – I’m with you on that. However, the fact is that tables are still useful in Web 2.0 days for – get this – displaying tabular data.
I know that’s a little revolutionary, so I’ll let in sink in.
In the meantime, bear with me while I illustrate a little technique that allows you to show and hide columns in a table with only dead-simple CSS manipulation. While techniques exist for hiding/showing columns using relatively trivial Javascript, there’s a certain appeal to executing a visualization technique with only CSS.
I’ve tested this with the major browsers, namely Firefox 1.5 and 2, IE 6, Opera 9, and Safari 2.x, and amazingly, they all function properly (although we do use the star-html hack for IE).
Here’s a page showing the basic table: link.
Note that there’s some basic CSS in there just to style the table, and the table markup itself is a standard, run of the mill, table.
We’d like to have the “category” column shown only when the user takes an action, for example clicking an expand button. First, we annotate the th and td elements with the class “moreDetail”, e.g.:
<td class="moreDetail">Vegetable</td>
We’ll amend the CSS so that th and td elements with the class of “moreDetail” are not displayed by default:
th.moreDetail {
display: none;
}
td.moreDetail {
display: none;
}
This leads us to the page seen in step 2: link.
Now, here’s the tricky bit. We will “show” the column not by manipulating the visibility of the individual cells (through the use of the display attribute), but instead by taking advantage of the way in which CSS rules are interpreted. We will apply a CSS class to the table itself, and take advantage of CSS descendant selectors to change the styling of the “moreDetail” class we’ve added to the table cells.
The CSS looks something like this:
table.showDetail th.moreDetail {
display: table-cell;
background-color: #E4E4A2;
}
table.showDetail td.moreDetail {
display: table-cell;
background-color: #E4E4A2;
}
For illustrative purposes, we add the “showDetail” class to the table and see the result in step 3: link. Note that the category column has reappeared because we’ve added the “showDetail” class to the table element.
Of course, IE does not support display: table-cell – fortunately table cells display just fine using display: block, so we add a * html rule to enforce this for IE 6 only, which brings us to step 3a:link. In other browsers, display:block is not a rule you want to put on a table cell (exercise to the reader: try it and see what happens!).
Now to tie it all together, we add two simple buttons that use Javascript to add and remove the “moreDetail” class on the top-level table element. You can see with this simple manipulation, we can show and hide any number of table columns. The final effect is seen in step 4: link.
Once again, IE 6 eludes us. Remember that the CSS classes provided worked fine in IE in step 3a, but for some reason IE 6 will not redraw the table when we simply change the table’s className property. The only way I was able to work around this was to “tickle” the class of one of the table cells (the first TH element) by simply setting its display property to block (which it already was). This is the only difference between step 4 and step 5, seen here: link.
So with step 5, we have a simple way to show and hide table columns using CSS and basic Javascript CSS class manipulation, which is compatible with all major, modern browsers.
HTML purists will note that another effective way to do this is by taking advantage of the <col> element. I’ll explore this technique in combination with the <col> element in a later post. Enjoy! Please send comments/questions/feedback my way.
