It's a tough problem to create HTML table in such a way that supports all of the following requirements simultaneously:
1) Has scrollable table body with content.
2) Has fixed table column headers.
3) Has header columns automatically aligned with body columns.
I looked through multiple solutions on the internet, and the best option so far is jquery.tablescroll.js plugin by Dimas Begunoff.
It allowed me:
1) Not to specify columns width explicitly.
2) Have multi-row headers with some cells spanning across several columns. The only trick is that first header row should have the same number of cells as body row.
While it's the best solution I could find -- it's still not perfect.
If table is pretty busy, and table content pushes column borders pretty hard -- header columns do not align perfectly with body columns.
If anybody knows better solution -- please let me know.
