1

我创建了一个表格，其中前两列“固定”到位，而正文可以水平滚动。我通过使用两张表来实现这一点，一张用于固定列，一张用于其余内容。我正在使用一些 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/。一段时间以来，我一直在把头撞在墙上，所以任何可以提供的帮助都将不胜感激。

4

1 回答 1

1

在评论中回答并转换为社区维基：

@罗斯写道：

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

@OP 写道：

这使我朝着正确的方向前进，通过将同一选择器的填充值更改为“2px 0”，它现在在 IE 中似乎工作正常。

于 2017-05-14T08:08:29.403 回答