在纯CSS中实现固定表头和固定列的表格

Question

在纯CSS中实现固定表头和固定列的表格

htmlcsshtml-tablemarkupfixed-header-tables

132

我需要创建一个带有固定头部和第一列的HTML表格（或类似外观的表格）。

迄今为止，我看到的每个解决方案都使用JavaScript或jQuery来设置scrollTop/scrollLeft，但在移动浏览器上不够流畅，因此我正在寻找纯CSS解决方案。

我在这里找到了一个解决固定列的方案：jsfiddle.net/C8Dtf/20/，但我不知道如何增强它以使头部也固定。

我希望它能在Webkit浏览器上运行或使用一些CSS3功能，但我再次强调，我不想使用Javascript进行滚动。

编辑： 这是我想要实现的行为示例：https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

- panfil

我目前没有看到 <html> 带有固定标题 <thead> 的 <table> 与 CSS-3 级别有什么关系。你还有什么其他想法？你迄今为止尝试了什么？ - Milche Patern

我尝试将复杂的“position”行为应用于行和单元格，但我不太明白它在哪里适用或不适用。 - panfil

2

这个答案可能会对你有所帮助 https://dev59.com/RmUq5IYBdhLWcg3wC8Lx#22801367 - Garry

22个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lukas Hechenberger · Answer 1

如果您只想使用纯HTML和CSS，我有一个解决方案来解决您的问题：
在这个jsFiddle中，您可以看到一个非脚本解决方案，提供了一个带有固定标题的表格。为第一列创建一个绝对定位的表格放在hWrapper-div内，并重新定位vWrapper-div应该不是问题。
使用服务器端或浏览器端模板引擎提供动态内容不应该是一个问题，我的解决方案在所有现代浏览器和IE8及以上版本的旧浏览器中都能很好地工作。

- Omprakash Sharma · Answer 2

只需要更改样式

<table style="position: relative;">
   <thead>
      <thead>
        <tr>
           <th></th>
        </tr>
      </thead>
   </thead>
   <tbody style="position: absolute;height: 300px;overflow:auto;">
      <tr>
         <td></td>
      </tr>
   </tbody>
</table>

演示：https://plnkr.co/edit/Qxy5RMJBXmkaJAOjBtQn?p=preview