Why do jqgrid, flexigrid and ingrid all use separate tables for the header and data?

We're using jqgrid on a web application to render the results of searches because of its built in functionality for paging and sorting that executes server side. We were previously using Tablesorter, but that operated client side and so didn't work well for how we were trying to use it.

We had a we开发者_如何学运维b designer on the project (whom has since left the organisation) that had created styles for tables and tried to get the same look working on the jqgrid. It sort of worked, but not quite. We have trouble with the header columns being unaligned with the data columns. We've fiddled with the CSS but it just doesn't seem to work. Sometimes we get scroll bars appearing when we don't want them.

Anyway, part of the problem seems to be that jqgrid uses one table for the column headers, and then another for the data itself. These tables are each wrapped in a div tag. We've had a look at some of the alternatives such as Flexigrid and Ingrid but they also use the same approach with separate tables for the headers and data.

It would be great if someone could explain why this approach is used. We were wondering why a standard table tag with a row of th for the headers and td for the data couldn't be used instead?

The reason these plugins use separate tables for headers and data is to allow for fixed header scrolling. As far as I know you cannot have headers and data in the same table, yet fix the headers to the top during scrolling.

Also for your alignment issue, if possible, I believe these plugins all have settings where you can set how wide you want each column, and this will make the data and header columns line up properly.