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使用。这个插件：link

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

它可以使用给定的HTML表对象并对其进行设置，以便它可以冻结给定数量的列或行或两者，因此固定的列或行不会滚动。

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

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

Answer 3

修复标头相对简单且易于实现。和列是不同的东西。

例如：

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

您必须监视onscroll envent，并检测标头是否在视图之外。当它不在视图中时，使用getBoundingClientRect（）检索tr.header的大小参数（也包括里面的TD），以及clientX和clientY。使用cloneElement（true）制作tr.header的克隆并将其放在同一个表中。然后将大小参数分配给其TD，并将此克隆元素固定为屏幕。

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

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

3 个答案: