Multiple thead/tbody design

Question

I have a question about usability/design. I currently am using some JQuery to hide/show entire areas. Currently these are all in one big table with a thead at the very top a

Answer 1

Multiple ​s in a table is invalid HTML. Most of the rows you have in ​s are contain data not headings, so should be in a .

is there any way to associate only 1 tbody with 1 thead inside the table so that it will not effect any others.

Yes, use a separate table.

If you want the column widths to be a static size all the way down so that the tables line up with each other, set the styles table-layout: fixed; width: 100% on each table, and set width styles on each of the cells in the first row (or, better ​s) that you don't want to share an equal proportion of the layout width.

(It's a good idea to use table-layout: fixed wherever possible, as it's faster to render and much more predictable than the auto table layout algorithm, especially in IE, which has a slightly messed-up implementation of it particularly when you're using colspan.)