我们如何冻结html表中的第一列和标题（有多行）答案

【问题标题】：How can we freeze first column and header(which have multiple rows) in html table我们如何冻结html表中的第一列和标题（有多行）
【发布时间】：2016-11-27 06:24:12
【问题描述】：

我尝试了很多解决方案来冻结第一列和标题（有多行），但在每个解决方案中我都必须使用自定义 css（根据解决方案的 css）。

在我的情况下，我无法更改我以前的 css。我想要在 div 滚动时可以冻结我的表格的代码（这是动态的）。

请提供解决方案。

【问题讨论】：

您可以像这样使用：document.getElementById('yourId').style.position = 'fixed'; 而不是在您的 css 中使用。还要检查这个stackoverflow.com/questions/673153/…上面的代码只是一个例子，说明如何在javascript中使用css函数。
我的表是动态生成的..这个不工作

标签： javascript freeze

【解决方案1】：

我是这样做的：

<table style="table-layout: fixed">
    <tr>
        <td><div style="width:100px; position:fixed;">Frozen Header text</div></td>
    </tr>
    <tr>
        <td>Some data</td>
    </tr>
<table>

我也不确定如何冻结第一列，但我想您可以尝试使用相同的策略，以及使用<col> 标记进行格式化，类似于：

<col style="width:100px; position:fixed;" />

试试看，然后告诉我们你的进展。

【讨论】：

【解决方案2】：

为了实现我的彗星 jquery 和 css 使用。这里插件：link

这是一个jQuery插件，可以让表格行列不滚动。

它可以获取给定的 HTML 表格对象并将其设置为冻结给定数量的列或行或两者，因此固定的列或行不会滚动。

要冻结的行应该放在表头部分。

它还可以结合使用 colspan 或 rowspan 属性来冻结行和列。

【讨论】：

【解决方案3】：

Fix header 相对简单且易于实现。而 column 则不同。

例如：

<table>
  <tr class="header"><td>header</td></tr>
  <tr><td>body</td></tr>
</table>

您必须监视 onscroll 事件，并检测标题是否不在视野范围内。当它不在视野范围内时，使用 getBoundingClientRect() 检索 tr.header 的大小参数（也包括里面的 TD），以及它的 clientX 和 clientY。使用 cloneElement(true) 克隆 tr.header 并将其放在同一个表中。然后将大小参数分配给它的 TD，并将这个克隆的元素固定到屏幕上。

这个解决方案不会影响表格的样式或布局，虽然它确实很复杂。

【讨论】：

这个描述读起来并不“相对简单”！如果很简单，为什么不提供一个完整的例子呢？如果不简单，为什么不提供一个完整的例子呢？
@AndrewLeach：与固定列相比相对简单。但要获得完整和通用的答案仍然很复杂。我的描述可以用很少的工作变成工作脚本。不要太评判！