similar tables looking different in opera and IE7

I'm trying to achieve a basic fixed table header e开发者_运维百科ffect. For this I'm using two tables with the exact same markup and CSS. The "content" table is in a div with overflow-y set. Everything looks fine except IE7 and Opera where the "header" table has different column widths than the "content" table.

Here is a jsfiddle: http://jsfiddle.net/gEtGW/1/

Please let me know if you have an idea about this.

Thanks!

EDIT:

In your HTML, you have this...

<table class="inner-table">
    <colgroup>
        <col width="83">
        <col width="92">
        <col width="123">
        <col width="120">
        <col width="177">
        <col width="84">
    </colgroup>

Where the widths above all add up to 679 total.

However, in your CSS, you have this...

.inner-table {
    width: 680px;
}

I'm not sure what each browser is supposed to do with the extra/missing pixel or how they decide whether the one pixel discrepancy is one extra pixel or missing one pixel. 679 versus 680... which one takes precedence?

Though, I'm sure every browser will probably render this differently.

Ok problem found (The problem is a text-style one):

'Column' text is making the bounds of the column celd change

For example change 'column' for 'col' and you see it like this:

http://jsfiddle.net/qYnPU/

I had this exact same problem and I first tried to solve it in the same way you are doing it. But that led nowhere -- just because of the kinds of cross-browser issues you're seeing. I spent days and days trying to make it right. I finally gave up on the two-table approach. Instead, I made a div with the table header material, calculating the width of each header element from the first row of the content table. It has worked flawlessly in all browsers. I posed a question like yours over here on SO. You might want to give it a look.

Here is the table using the new scheme.

HTH