Daily Archives: April 11, 2007

Hiding multiple rows in a TABLE using TBODY

Why would you want to do this? I had a form, where one of the fields is a poplist and picking a value will need to render/hide additional fields. For example, a field indicates vehicle type, depending on whether sedan or coupe or a pick up truck, the subsequent fields may need to change. So, now that we have established a clear functional requirement, let’s move on to the technical feasibility.

I always wondered who would really care about THEAD, TBODY and TFOOTER. But then, today I learned there can be multiple TBODYs in a table. But before that, my naive implementation of achieving the above requirement was to put all the fields that need to be hidden/shown into a nested table and hide/show it. The only problem and a big one with that approach is that it doesn’t align the prompts of the fields in the nested table with the outer table.

That’s when I tried exploring a bit more, and finally found on some advanced techniques with tables at http://msdn.microsoft.com/workshop/author/tables/tables_overview.asp

So, promptly I tried what was suggested in that article, i.e., to use tbody for the subset of rows that need to be hidden and it worked just fine on IE. But not so on Firefox.

Then, more searching and ended up with

http://codebetter.com/blogs/steve.hebert/archive/2006/05/23/145344.aspx

which suggested using “display:table” instead of “display:block”. I tried it but no luck. It doesn’t work in IE as well.

More research and finally, it worked with “display:table-row-group;” more about which can be found at
http://www.w3.org/TR/CSS21/tables.html#value-def-table-row-group

This works for Firefox, but not IE. So, I had to end up with browser specific code to set it to either table-row-group or block.

Leave a comment

Filed under css, DHTML