Html 如何制作<；tr>'；s位置高度：固定列跟随其内容'；她身高多少？

目前，我的页面中有一个表，我正在尝试冻结第一列。使用该特定列的

position:fixed

，冻结列可以正常工作

然而，还有另一个问题。当内容有多行时，

不会根据内容扩展其高度。因此，有没有解决办法

这是我的演示：

#表包装器{
宽度：95%；
浮动：左；
溢出-x：滚动；
背景：ddd；
}
桌子{
背景：#fff；
宽度：1200px；
文本对齐：居中；
溢出：隐藏；
位置：相对位置；
}
表THAD tr th{
宽度：15em；
}
表THAD tr th：第一个孩子，
表tbody tr td：第一个孩子{
顶部：自动；
左：0.5；
位置：固定；
宽度：6em；
}
表THAD tr第N个孩子（2），
表tbody tr td:n个孩子（2）{
左：7em；
/*在第一列后面显示第二列的步骤*/
}

&larr；
&rarr；
标题1
标题2
头3
头4
标题5
1
asdasdada
12
13
14
15
2
asdasdada
asdasdada
22
23
24
25
3
asdasdada
32
33
34
35
4
asdasdada
asdasdada
asdasdada
asdasdada
asdasdada

42
43
44
45
5
asdasdada
52
53
54
55

您可以浏览所有td固定元素，然后将这些高度设置为默认td元素

  $('table tbody tr td:first-child').each(function(){
      var height = $(this).height();
      $(this).parent().find('td').height(height);
  });

---

工作示例

我最终使用了@feesar answer，但是我在性能方面遇到了另一个问题。因此，以下是我的案例的最终结果：

//调整th和td的高度。
//通过使用原生js+for循环提高性能。
var firstHeader=$（“#表包装器th:first child”）；
firstHeader[0]。style.height=firstHeader[0]。parentNode.offsetHeight+“px”；
var firstColumn=$（“#表包装器td:first-child”）；
对于（var i=0；i

---

逻辑和结果是相同的，但它有更好的性能。希望它能有所帮助。

就性能而言，我认为您最好只克隆第一个表列并将其绘制在“真实”列之上，如下所示：

var$overlayTable=$（“#表包装表”）.clone（）.addClass（“overlay”）；
$overlytable.find（“tr>*：not（：first child）”）.remove（）；
$overlytable.appendTo（“#表包装器”）；
$（窗口）。打开（“滚动”，函数（）{
$overlytable.css（“left”，$（window.scrollLeft（）+“px”）；
});
#表包装器{
位置：相对位置；
}
#表包装表{
文本对齐：居中；
表布局：固定；
溢出-x：滚动；
宽度：1200px；
边界塌陷：塌陷；
}
#表包装器表tr>*{
左边距：150像素；
宽度：自动；
}
#表包装器表tr>*：第一个子级{
宽度：6em；
}
#表包装器table.overlay{
位置：绝对位置；
排名：0；
颜色：红色；
背景色：白色；
宽度：6em；
}


&larr；
&rarr；

标题1
标题2
头3
头4
标题5
1
asdasdada
12
13
14
15
2
asdasdada
asdasdada
22
23
24
25
3
asdasdada
32
33
34
35
4
asdasdada
asdasdada
asdasdada
asdasdada
asdasdada

42
43
44
45
5
asdasdada
52
53
54
55
可能重复@Terry No，我不认为这是重复的。我在这个问题上关心的是
的高度，而不是冻结列。这是一个很好的技巧，但是Firefox中有一个小故障。当它被滚动时，会有一个延迟，使得第一列的移动有点尴尬。嗯，我使用的是Firefox，这里没有类似的东西——至少在上面的测试用例中没有。我不知道，在你的现实世界中可能有。这仍然是一个值得探索的选择。另外，在这里我对克隆表使用了“绝对”定位，计算了滚动条上的“左”。您可以对克隆表（而不是行/单元格！）使用“fixed”，并计算一次“top”和“left”，如果这符合您的用例的话。这将消除所有闪烁。
  // Adjust the th and td's height.
  // Improve the performance by using native js + for loop.
  var firstHeader = $('#table-wrapper th:first-child');
  firstHeader[0].style.height = firstHeader[0].parentNode.offsetHeight + "px";
  var firstColumn = $('#table-wrapper td:first-child');
  for (var i = 0; i < firstColumn.length; i++) {
    firstColumn[i].parentNode.style.height = firstColumn[i].offsetHeight + "px";
  }