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

Question

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

就我而言，我无法更改以前的 CSS。我想要在 div 滚动上我可以冻结我的表（这是动态的）的代码。

请提供解决方案。

Answer 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;" />

试试看，请告诉我们你的情况。

Answer 2

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

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

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

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

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

Answer 3

Fix header 相对简单，易于实现。列是另一回事。

例如：

<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，并使这个克隆的元素固定在屏幕上。

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