Two tables meant to appear as one for fixed header scrolling -- fixed column width issues

The concept seems simple enough: I am trying to implement fixed header scrolling by dividing the header into table A and the actual data into table B. By giving the columns precise matching fixed widths they should appear as one table.

However, depending on the number of columns I get weird rendering issues with any browser calculating column 开发者_JAVA技巧widths that turn up 1 or 2 pixels short or too long, causing the table to appear unaligned.

QUESTION: What is am I missing that is causing these off-by-one/two pixel rendering issues? Can I guarantee the widths using this approach, if so how?

I placed the code in a jsfiddle for ease of editing:

http://jsfiddle.net/hwm6q/4/

EDIT:

Please note that the fix has to work within the confines of applying it to making a Grid control (It can't just be a hack fix for the example that I posted).

Not sure if this will work... and untested... but what if you gave

.PseudoGrid and .SGrid

a set width?

I've updated the fiddle: http://jsfiddle.net/hwm6q/5/