具有固定左列的表.由于位置绝对而导致的行高问题

Table with fixed left column. Row height issue due to position absolute

本文关键字：问题 高问题 于位置 位置      更新时间：2023-09-26

我正在构建一个表格，其中第一列左列固定。我使用了一个仅限 CSS 的解决方案，除了由于使用">位置：绝对">而导致的特殊问题外，它运行良好。

你可以在这个JSFiddle上看到它。

第一列的行

与第二列的行不匹配。我设置 border="1"> 来突出问题。我需要行的高度匹配，因为我想在第一列的垂直右边框上绘制阴影，以便当用户水平滚动表格时，似乎列在第一列下滑动(不过，这是一个众所周知的效果(。

如您所见，阴影是"碎片化的"，这是由于">位置：绝对";但是如果没有绝对定位，固定列将无法工作。

经过数小时的尝试寻找纯CSS解决方案，我想一些Javascript/Jquery应该通过获取第二列行的高度并将其设置为第一列的行来解决问题。

有点这样(不起作用(：

$('tr th').each(function(i) {
    var RowTwo = $('tr td:nth-child(2)').get(i);
    $(this).height($(RowTwo).height());
);

我不擅长Javascript/Jquery，所以我被困在这里。

请注意以下事项：

  • HTML 只能稍微更改，如果它是XSL/XML 转换
  • 该表可能只有一个(不是两个并排的表(
  • THEAD使用TH
  • TBODY 使用 TH 和 TD
  • JSFiddle 生成一个只有 2 列 (1 + 1( 的表，但通常该表可以显示更多的列 (1 + n(

现在就可以工作了，只需获取tr身高的第二个孩子，并将第一个孩子设置为该高度。

注意： 您需要对CSS进行排序，因为它们看起来高度不同，但它们确实相同。因为边界等。

jQuery 

$('tr').each(function(i) {
    var rowTwo = $(this).children().eq(1).height();
    $(this).children().eq(0).height(rowTwo);
});

演示

请尝试使用以下代码：

$('th.keys').each(function(){
        var myHeight = $(this).height();
        var sib = $(this).siblings().eq(0);
        var sibHeight = sib.height();
        var maxHeight = Math.max(myHeight,sibHeight);
        $(this).height(maxHeight);
    });
相关文章：