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

您希望其他行与第一列中的单元格具有相同的height，对吗？如果我理解正确，你需要使用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更高，一旦没有，它就会停止。在循环结束时，我们再建立height一次，以防某些行最终比第一列短。

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

Answer 2

我找到的解决方案是将绝对定位的td中的内容重复到相对td的最后一个td。由于我可以生成列服务器端，因此很容易在另一列中重复内容。然后我用css来设置`visibility：hidden＆＃39;在最后一个td。只要隐藏td和绝对td的宽度相同，那么它们将具有相同的高度，并且行的两个部分（绝对和相对）将具有相同的高度。

它还会占用表格末尾的空间，这可能会影响外部元素的大小。

匹配绝对td的高度

2 个答案: