Collapsing Table Rows

I’ve been somewhat stumped trying to create some JavaScript to successfully collapse table rows, but I think I’ve finally come up with something that seems to work pretty well. I tried setting display: none; on the TR element and on each TD element, but when I set display: block; Gecko browsers don’t display the row correctly.

What seems to work is putting a span around the content of each cell and setting display: none; on each span. With the content removed from each cell, the row collapses nicely. This could be a bit verbose if you’re trying to target rows randomly, but it you only wnat to hide and show a single row (known in advance) this seems to do the trick.

Anyone have other/better ideas I should look at?