正文 

当前位置： 首页 > 知识 >

滚动期间表头需要保持固定[重复]

     2023-03-06     271

关键词：

【中文标题】滚动期间表头需要保持固定[重复]【英文标题】：Table header needs to remain fixed during scrolling [duplicate] 【发布时间】：2013-09-09 17:48:35 【问题描述】：

我有一个带有标题和正文的表格，我希望表格标题在正文上发生滚动时保持固定。

表格是这样设置的：

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>

        ...more rows for data...

    </tbody>

表格用 a 封装，CSS 如下：

overflow-x: hidden;
overflow-y: auto;
height: 400px;

我需要表格标题保持完全静止，但是当我添加 position:fixed;标题被压扁。

最好的方法是什么？

【问题讨论】：

我可以推荐一个很酷的定位资源 - learnlayout.com。一般来说，我会选择 position:fixed，正如 Jason 在下面回答的那样。 因为我写了一个插件来做到这一点，我可以说固定定位是一个非常重要但很小的部分 @cdub 你能和我分享一些代码吗，比如它如何使用 html 和脚本代码 【参考方案1】：

如果您需要您的表格包含任何动态数据以使您无法指定宽度，则必须使用如下 JS/jQuery 解决方案：

Table header to stay fixed at the top when user scrolls it out of view with jQuery

如果您确切知道将要显示的内容并且不介意进行一些调整/修改，您可以只设置thead position:fixed，然后将间距弄乱，直到看起来不错。

Take a look at this jsFiddle to see what I mean.

编辑：这是一个更新的 jsFiddle，间隔更好一些，因为 OP 懒得为自己输入几个字符，并希望其他人为他做所有事情。

http://jsfiddle.net/yXTD9/1/

【讨论】：

JSFiddle 不是我的意思，因为您的标头与您的数据不匹配。查看第 2 列和第 3 列。 您是把代码弄乱了，还是只是看了一下页面，看看工作是否为您完成？你到底有没有看过我的帖子？ 这个问题不能用纯 css 解决，如果你想要一个通用的解决方案.. 请参阅：jsfiddle.net/yXTD9/2 并滚动到页面底部。或jsfiddle.net/yXTD9/3：P【参考方案2】：

我刚刚更新了一个我写的插件来做这件事：

http://mkoryak.github.io/floatThead/

这可能是你需要的

【讨论】：

您好，我已将您的插件用于固定标题，并且效果很好。我想在水平滚动时固定第一列。您对此有什么建议，我如何在垂直和水平滚动时同时实现固定标题和固定第一列。希望你能尽快给我一些解决方案。在此先感谢... google 一下，可能有一个插件可以锁定第一列，与我的插件很好地配合使用。我的插件不会锁定第一列，永远不会 @mkoryak 嘿先生，你能分享一个带有修复标题的滚动表格主体的小源代码吗，因为我去了你的链接，但没有完美的例子表明没有html 不，我不能，这是个愚蠢的问题。

bootstraptable实现固定悬浮table表头并可以水平滚动

...，需要将表格头部固定，而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap3，故也可以叫做bootstraptable。需要实现的是：表格头部固定，并且支持水平滚动htmlcode(sourcetable):<tableid="top_fix_table"border="0"cellpadding="4"cell... 查看详情

html或js代码如何实现让一个table的表头不动，body可以自由上下左右滚动，同时保持表头与body的宽度一致？

现在将一个table放进一个DIV层里，给DIV设置滚动条，这样的话一拉上下滚动条，表头就看不见了，非常不方便，有没有方法可以让拉滚动条的时候表头不动，只滚动下面的BODY。同时表头与BODY对应列的宽度必须自动保持一致，不... 查看详情

带有滚动正文的引导固定表头

】带有滚动正文的引导固定表头【英文标题】：bootstrapfixedtableheaderswithscrollingbody【发布时间】：2015-11-3006:16:19【问题描述】：编程新手，也是第一次在这里发帖。我在面板中的引导表有点问题。我有一个下拉菜单，用户可以在... 查看详情

easyuidatagrid表头固定（垂直滚动条）列固定（水平滚动条），每页显示1000行

...90%以上的界面需求。1、当数据行很多时，会呈现垂直的滚动条，但是向下滚动，表头却被淹没了，这不符合人类偷懒的特点（我怎么可能记得住每列的数据代表的意思！），所以需要固定表头。 datagrid.datagrid({   &... 查看详情

html固定table表头的实现思路

实现步骤1.将table放在可滚动容器中；2.可滚动容器外层还需要一个容器，这个容器需设置超出范围隐藏和定位(相对、绝对都行)；3.利用脚本克隆一个目标table，调整克隆table的列宽与原table相同，隐藏tbody，追加到外层的容器中；... 查看详情

纯css控制－表格表头固定,内容多时滚动内容

<html><head><styletype="text/css">*{margin:0;padding:0;}/*所有内容都在这个DIV内*/.all{width:100%;border:1pxsolid#000000;}/*表头在这个DIV内*/.title{width:500px;/*这个宽度需要与下面的内容的DIV相等*/}/*表格样式*/table{w 查看详情

table固定表头固定列实现横向纵向滚动

...，设置有tbody的div固定高度，超出overflow:scroll；至于横向滚动的问题，可以设置position:sticky，然后根据左右浮动的个数及对应列所在的index，计算left或者right的长度。因为table里thead和tbody本身无法设置高度，超出用stroll这种方式... 查看详情

antdvuetable滚动页面固定表头

页面滚动固定表头思路由于直接去控制antdtable的头部置顶会导致头部样式丢失，每列去获取宽度设置感觉太麻烦，最后决定使用两个table，一个只做表头固定使用，不赋予数据。具体做法时，将传入的属于都付给两个table，隐藏... 查看详情

elementui组件表格高度以及表头固定表身滚动方法

1.表格高度：在el-table标签里增加一个类名classA,然后写css样式：.classAth,.classAtdpadding:0!important;height:20px;//需要的高度line-height:20px;2.表头固定，表身超过高度自动滚动直接在el-table标签里增加height:100%就可以了。 查看详情

使用javascript / css修复表头[重复]

...格，并且正在尝试创建一个固定的标题，这样无论我向下滚动多少，标题始终对用户可见。我对网页设计没有太多经验，所以想知道如何使用css/javascript来做到这一点？我猜我首先需要在&lt;t 查看详情

固定表头[重复]

】固定表头[重复]【英文标题】：FixedTableHeader[duplicate]【发布时间】：2016-05-0610:08:12【问题描述】：我知道如何用几种不同的方式制作固定表头，但我正在寻找最好的方式，我只想使用&lt;table&gt;,&lt;thead&gt;,&lt;tbody&... 查看详情

在移动设备上滚动时保持标题位置固定

】在移动设备上滚动时保持标题位置固定【英文标题】：Keepheaderpositionfixedwhilescrollingonmobile【发布时间】：2015-10-1903:40:53【问题描述】：所以我有一个position:fixed;标头并且在桌面上工作正常。但是，当我在移动设备上滚动时，它... 查看详情

实现固定表头和表列的table组件

前端的table在设置overflow后横向、纵向滚动。但数据比较多时，为了查看方便，希望能在纵向滚动时固定表头，在横向滚动时在左边或右边固定特定表列，这是原生不支持的。目录实际效果设计思路普通表格固定表... 查看详情

固定下拉菜单后，在divi滚动，以保持菜单项白色（或任何颜色，你需要的）

fixesthedropdownlimenuinDiviaftershrinkingheaderscrolltokeepthelielementsthecorrectcolor/*----fixesdropdownafterscrollsomenuitemsarestillwhite---------*/#main-header.navliula{color:#ffffff!important;} 查看详情

固定下拉菜单后，在divi滚动，以保持菜单项白色（或任何颜色，你需要的）

fixesthedropdownlimenuinDiviaftershrinkingheaderscrolltokeepthelielementsthecorrectcolor/*----fixesdropdownafterscrollsomenuitemsarestillwhite---------*/#main-header.navliula{color:#ffffff!important;} 查看详情

滚动表格固定表头和左边栏

...一个放在左上角的标签，宽高与第一个td相同　　当表格滚动的时候固定头部和左边栏的表格也跟着同步滚动（通过获取和设置scrollLeft和scrollTop） 示例代码如下：　　CSS：　　　　.containt{text-align:cent 查看详情

水平和竖直滑动条捆绑，表头固定的实现

...有数据，这时候我们就必须考虑引入页面的水平或者竖直滚动条。这样能够实现在固定大小的div中，通过滑动滚动条来对所有数据进行检索。这时，我们会发现，如果表头不被固定，我们滑动滚动条时，不能很好的确定当前数据... 查看详情

具有固定位置和可滚动表数据元素的 HTML 表头

】具有固定位置和可滚动表数据元素的HTML表头【英文标题】：HTMLTableHeaderwithFixedPositionandscrollabletabledataelements【发布时间】：2017-03-2617:57:13【问题描述】：这个问题的主要目的是固定表格标题，当我们垂直滚动时，只有元素应该... 查看详情