jquery - IE 9 および 10 でスクロール可能な本文を含む列テーブルが正しくレンダリングされない問題を修正

Question

本文を水平方向にスクロールできる一方で、最初の 2 つの列が「固定」されたテーブルを作成しました。これは、2 つのテーブルを使用して実現しました。1 つは固定列用で、もう 1 つは残りのコンテンツ用です。2 つのテーブルで行の高さを同じに保つために jQuery を使用していますが、行の高さが完全に一致していないように見える IE 9 & 10 でいくつかの問題が発生しています。

これは、私のテーブル HTML のわずかに切り捨てられたバージョンです。

<div style="width: auto" class="groupDetails">
<table id="table1" class="table1" border="0" cellspacing="0">
    <thead>
        <th class="placeHolder" colspan="2">
            &nbsp;
        </th>
    </thead>
    <tbody>
        <tr class="shared">
            <td class="groupName">TEST CUSTOMER 1:</td>
            <td class="typeName">First</td>
        </tr>
        <tr class="shared">
            <td class="typeName" colspan="2">Second</td>
        </tr>
        <tr class="shared totals">
            <td class="typeName" colspan="2">Total for Top:</td>
        </tr>
    </tbody>
</table>
<div class="table2">
    <table border="0" cellspacing="0" id="table2">
        <thead>
            <tr class="subHeader">
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
                <th>&nbsp;</th>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
                <th>&nbsp;</th>
                <th>Header</th>
                <th>Header</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>4</td>
                <td>3</td>
                <td>2</td>
                <td>&nbsp;</td>
                <td>2</td>
                <td>3</td>
                <td>2</td>
                <td>Y</td>
                <td>2</td>
                <td>&nbsp;</td>
                <td>5</td>
                <td>6</td>
                <td>&nbsp;</td>
                <td>6</td>
                <td>Y</td>
            </tr><tr>
                <td>1</td>
                <td>4</td>
                <td>3</td>
                <td>2</td>
                <td>&nbsp;</td>
                <td>2</td>
                <td>3</td>
                <td>2</td>
                <td>Y</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>6</td>
                <td>&nbsp;</td>
            </tr><tr class="totals">
                <td>2</td>
                <td>8</td>
                <td>6</td>
                <td>4</td>
                <td>&nbsp;</td>
                <td>4</td>
                <td>6</td>
                <td>4</td>
                <td>Y</td>
                <td>2</td>
                <td>&nbsp;</td>
                <td>5</td>
                <td>6</td>
                <td>&nbsp;</td>
                <td>12</td>
                <td>Y</td>
            </tr>
        </tbody>
    </table>
</div>

そして、私が使用しているjQueryは次のとおりです。

$("div.groupDetails").find(".table1 > tbody > tr").each(function() {
    var originalIndex = $(this).index();
    $("div.groupDetails").find(".table2 tbody tr").eq(originalIndex)
        .height($(this).height());
});

私が話していることを示すために Fiddle を作成しました: http://jsfiddle.net/4HXbz/2/。私はしばらくの間、これについて壁に頭をぶつけてきたので、与えられる助けがあれば大歓迎です.