I was wondering if anyone has tripped over this... I'm using jquery and the tablesorter plug-in (along with a tablesorter updated module to accomodate child rows - http://www.pengoworks.com/workshop/jquery/tablesorter/jquery.tablesorter.mod.js) to sort my db table. The collapsible rows have a 'extend-child' class which attaches them to the 'parent' row for sorting purposes. When a certain cell is clicked on the parent, the child row is displayed (the jquery goes and sets display to block).
The child rows are set to display:none initially, and when the associated parent cell (tagged w/ a class of 'collapsible') is clicked, the child row displays. The jquery stuff works great, but it's the display I have a question about (so I came here )... Some of my actual db table rows have cells which vary in height. When I try to display them, with the child row below them (my particular app only has one child row/parent) the cells are unequal (I draw a border around the cells which makes it really obvious). Is there any way for me to display the parent row with equal height cells while the child row is set to display none? I'm seeing it in all of the browsers I've looked at - ff, ie, opera. Because the cell heights will vary, I have no way of really knowing a height or min-height to specify.
I've doctored up the jquery tablesort demo/doc file (with the child row mod update) to show the problem (there's alot of overhead in butchering the actual app for you to see it..). The unequal rows don't really look that bad in this example, but do in my actual application - and it does show the problem.
The doctored up jquery tablesort file is at http://thequarrygroup.com/table_row_alignment/tablesorter1.htm
Any ideas, pointers greatly appreciated!