css - 绝对 td 的匹配高度

Question

我正在尝试设置一个卡住列，唯一需要解决的问题是同一行上其他 td 的高度不会扩展以匹配绝对定位 td 的高度。由于卡住标题中的文本是任意的，它可以跨越多行。 如果它不是绝对定位的，那么这将迫使同一行中的其他 td 假定更大的高度，这是我想要的行为。但是由于第一个 td 是绝对的，那么高度不再链接到同一行中的其他 td。

如何强制同一行中的其他 td 采用第一个 td 的较大高度？

http://jsfiddle.net/2Wrms/5/

table {
    border-collapse: separate;

    width: 100%;
    table-layout:fixed;
}
td {
    margin:0;            

}
div.pivot-container {
    width: calc(100% - 125px);
    overflow-x:scroll;
    margin-left:125px;
    overflow-y:visible;
}
.headcol {
    position:absolute;
    width:125px;
    left:20px; /*must match padding of outer element*/
    top:auto;
}
.long {            
    width: 230px;
    vertical-align:top;
}

<div style="padding-left:20px;">
<div class="pivot-container">
    <table>
        <tr>
            <td class="headcol"> kjgh kj ghkj ghkj gkj g2jhfgjhfg</td>
            <td class="long">QWERTJKLZXCVBNM</td>
            <td class="long">QWERTYUIOFGHJKLZXCVBNM</td>
            <td class="long">QWERTYUVBNM</td>
            <td class="long">QWERTYCVBNM</td>
        </tr>
        <tr>
            <td class="headcol">5765765785</td>
            <td class="long">QWERTYUIOPXCVBNM</td>
            <td class="long">QWERTYCVBNM</td>
            <td class="long">QWERTYCVBNM</td>
            <td class="long">QWERTYUIOPASDNM</td>
        </tr>
    </table>
</div>
</div>

Answer 1

您希望其他行与第一列中的单元格具有相同的高度，对吧？如果我没理解错的话，您需要使用 jQuery 建立整个表格的 width，这样 height 也会更改为您想要的。

例如，如果您希望所有行的高度不超过 26px(第一列中单元格的高度)，那么表格的 width 可以是通过遍历行并检查每一行的 height 并相应地更改 width 来更改以匹配此限制，因为只是在 css 中指示所有行都应该是 X height 将不起作用。

$(window).load(function() {
    var cont = 0;
    var control = false;
    var wTable = $("table").width();
    do {
        cont = 0;
        $("tr").each(function() {
            h = $(this).height();
            if(h > 26) {
                cont++;
                if(cont == 1) {
                    return false;
                }
            }
        });
        if(cont == 0) {
            control = true;
        }
        else {
            wTable = wTable + 200;
            $("table").width(wTable);
        }
    } while(!control);
    $("tr").height(26);
});

这样，我们告诉表格将 200px 添加到它的 width 中，对于它发现高于 26px 的每一行，并且一旦没有了，它就会停止。在循环结束时，我们再次建立高度，以防某些行最终比第一列短。

可以看例子here ，它使用了一些您的原始代码(我建议直接在您的浏览器中测试它，但是，由于 JSFiddle 的布局，它不会正确显示)。希望这会有所帮助。