Question

我有一个我创建的表，其中前两列“固定”到位，而正文可以水平滚动。我通过使用两个表来完成此操作，一个用于固定列，另一个用于其余内容。我正在使用一些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());
});

我创建了一个小提琴来展示我在说什么：http://jsfiddle.net/4HXbz/2/。我已经在这一段时间一直撞在墙上一段时间了，所以任何可以给予的帮助都将不胜感激。

Answer 1

Answered in the comments and converted to a community wiki：

@Ross写道：

我在line-height: 1.1em选择器上添加了table > tbody > tr > td，以匹配将第一组行放入ie10的行的字体大小，但我无法立即发现有关较低行的差异那些仍然存在问题的行......希望这能指出你正确的方向！

@OP写道：

这使我处于正确的方向，并通过将相同选择器的填充值更改为＆＃34; 2px 0＆＃34;，它现在似乎在IE中正常工作。

修复了在IE 9和9中无法正确渲染滚动体的列表。 10

1 个答案: