1. I need to have multiple header rows. I was able to address this by putting a different style on each of the rows and adjusting the ‘top’ attribute on each of the header rows. Not too bad but a little awkward. I tried locking the instead but it did not work.

2. I cannot get colspan and rowspan attributes on table cells to work. In particular, the row span drops the column from the 2nd row meaning the the header rows no longer match. With the case of colspan, the data does span the columns but even if I use an attribute to center the information in the spanned columns, it only applies the attribute to the first column in the spanned set.

Obviously this solution solves a couple of problems:
1. Performance

Yes, it is. You can use jQuery to figure out the width of your table and the time the page loads and then apply that value to the outer and inner DIVs.

So, let’s say you have a table with an id of “flexiTable”. You could do something like this:

//get the width of the table, itself....
var tblWidth = $("table#flexTable").width();

//set the width of the outer DIV
$("div.outer").css('width', (tblWidth + 20) + 'px');

You would want to place this routine in your $(document).ready() handler.

Let me know if you have any other questions.

Thanks.

Bob The Geek