仅冻结html表的顶部行（固定表标题滚动）

  • Z时代
  • 2024-01-10
  • 分类：问答

我想制作一个冻结顶部行的html表（因此，当您垂直向下滚动时，总是可以看到它）。

有没有使这种情况发生的聪明方法，而无需使用javascript？

请注意，我不需要冻结左列。

回答：

如果没有JavaScript，您将无法有效实现这一目标……特别是如果您想要跨浏览器支持。

您采取的任何方法都有很多问题，特别是关于跨浏览器/版本支持的问题。

编辑：

即使不是您要修复的标头，而是数据的第一行，概念仍然相同。我不是您所指的100％。

，我公司还派我去研究可以在IE7 +，Firefox和Chrome中运行的解决方案。

经过无数次搜寻，尝试和挫折之后，它实际上归结为一个基本问题。在大多数情况下，为了获得固定的标题，您需要实现固定的高度/宽度列，因为大多数解决方案都涉及使用两个单独的表，其中一个用于标题，该标题将浮动并停留在包含数据的第二个表上。

//float this one right over second table
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
</table>
<table>
//Data
</table>

一些尝试的替代方法是利用tbody和thead标签，但是它也存在缺陷，因为IE不允许您将滚动条放在tbody上，这意味着您不能限制其高度（如此愚蠢的IMO）。

<table>
  <thead style="do some stuff to fix its position">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  </thead>
  <tbody style="No scrolling allowed here!">
     Data here
  </tbody>
</table>

这种方法有很多问题，例如，确保精确的像素宽度，因为表格是如此可爱，以至于不同的浏览器会根据计算结果不同地分配像素，而您根本无法（AFAIK）保证在所有情况下均能完美分配。如果表中有边框，这将变得非常明显。

我采取了另一种方法，并说了螺丝桌，因为您不能保证这一点。我用div模仿表。这也存在放置行和列的问题（主要是因为浮动存在问题，使用内嵌块不适用于IE7，因此，这确实让我不得不使用绝对定位将它们放置在适当的位置）。

有一个制作Slick Grid的人，它具有与我非常相似的方法，您可以使用一个很好的（尽管很复杂）示例来实现这一目标。

以上是 仅冻结html表的顶部行（固定表标题滚动） 的全部内容， 来源链接： utcz.com/qa/405027.html

回到顶部