table表头固定，内容滚动

最新推荐文章于 2025-03-13 10:13:35 发布
最新推荐文章于 2025-03-13 10:13:35 发布
阅读量4.2k 收藏 18
点赞数 5
分类专栏： 笔记 文章标签： html css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44869043/article/details/117946633
版权

最近接到一个需求，要thead表头固定，tbody内容实现滚动。在这里插入图片描述
简单，给tbody加高度就行了。
在这里插入图片描述
什么？！竟然不行失败了！！
既然无法限制tbody本身的高度，那就给它套一个div，限制div的高度，让tbody在div里面滚就好了。
但是！！table里面，不能在tbody外面套div！浏览器无法解析！会变成这样：
在这里插入图片描述
哎呀，这也不行那也不行，到底要怎么搞？
找了别人的代码，好家伙！可以用两个table来实现这个功能。
第一个table管理thead，第二个table管理tbody，再用div去包裹第二个table，限制div的高度就行了！

<style>
    th {
        background-color: rgba(0, 0, 0, .2);
        height: 32px;
        line-height: 32px;
        width: 60px;
    }

    td {
        border-right: 1px solid #eee;
        height: 48px;
        line-height: 48px;
        width: 60px;
    }
</style>

<body>
    <table>
        <thead>
        	<tr>
            	<th>表头1</th>
            	<th>表头2</th>
	            <th>表头3</th>
            </tr>
        </thead>
    </table>
    <div style="height:200px;overflow: auto;">
        <table>
            <tbody>
                <tr>
                    <td>行1</td>
                    <td>行1</td>
                    <td>行1</td>
                </tr>
                <tr>
                    <td>行2</td>
                    <td>行2</td>
                    <td>行2</td>
                </tr>
                <tr>
                    <td>行3</td>
                    <td>行3</td>
                    <td>行3</td>
                </tr>
                <tr>
                    <td>行4</td>
                    <td>行4</td>
                    <td>行4</td>
                </tr>
                <tr>
                    <td>行5</td>
                    <td>行5</td>
                    <td>行5</td>
                </tr>
                <tr>
                    <td>行6</td>
                    <td>行6</td>
                    <td>行6</td>
                </tr>
                <tr>
                    <td>行7</td>
                    <td>行7</td>
                    <td>行7</td>
                </tr>
                <tr>
                    <td>行8</td>
                    <td>行8</td>
                    <td>行8</td>
                </tr>
                <tr>
                    <td>行9</td>
                    <td>行9</td>
                    <td>行9</td>
                </tr>
                <tr>
                    <td>行10</td>
                    <td>行10</td>
                    <td>行10</td>
                </tr>
                <tr>
                    <td>行11</td>
                    <td>行11</td>
                    <td>行12</td>
                </tr>
                <tr>
                    <td>行12</td>
                    <td>行12</td>
                    <td>行12</td>
                </tr>
                <tr>
                    <td>行13</td>
                    <td>行13</td>
                    <td>行13</td>
                </tr>
                <tr>
                    <td>行14</td>
                    <td>行14</td>
                    <td>行14</td>
                </tr>
                <tr>
                    <td>行15</td>
                    <td>行15</td>
                    <td>行15</td>
                </tr>
                <tr>
                    <td>行16</td>
                    <td>行16</td>
                    <td>行16</td>
                </tr>
                <tr>
                    <td>行17</td>
                    <td>行17</td>
                    <td>行17</td>
                </tr>
                <tr>
                    <td>行18</td>
                    <td>行18</td>
                    <td>行18</td>
                </tr>
                <tr>
                    <td>行19</td>
                    <td>行19</td>
                    <td>行19</td>
                </tr>
                <tr>
                    <td>行20</td>
                    <td>行20</td>
                    <td>行20</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

来看看效果：
在这里插入图片描述
成功啦！
但是这滚动条也太丑了吧！
div没有设置宽度，默认铺满，给div限制宽度，滚动条就不会离表格这么远了。
再使用colgroup来布局。这样就不需要单独设置td的宽度了。
在这里插入图片描述
再调整一下滚动条的样式，美化一下

::-webkit-scrollbar-thumb {
   	background: rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: transparent;
	border-radius: 3px;
}

<style>
    div {
        width: 100%;
    }
    table {
        width: 100%;
    }
    th {
        background-color: rgba(0, 0, 0, .2);
        height: 32px;
        line-height: 32px;
        border-right: 1px solid #eee;
    }

    td {
        border-right: 1px solid #eee;
        height: 48px;
        line-height: 48px;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: transparent;
        border-radius: 3px;
    }
</style>

<body>
    <table>
        <colgroup>
            <col>
            <col width="40%">
            <col width="40%">
        </colgroup>
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th class="gutter" style="width: 2px;"></th>
            </tr>
        </thead>
    </table>
    <div style="height:200px;overflow: auto;">
        <table>
            <colgroup>
                <col>
                <col width="40%">
                <col width="40%">
            </colgroup>
            <tbody>
                <tr>
                    <td>行1</td>
                    <td>行1</td>
                    <td>行1</td>
                </tr>
                <tr>
                    <td>行2</td>
                    <td>行2</td>
                    <td>行2</td>
                </tr>
                <tr>
                    <td>行3</td>
                    <td>行3</td>
                    <td>行3</td>
                </tr>
                <tr>
                    <td>行4</td>
                    <td>行4</td>
                    <td>行4</td>
                </tr>
                <tr>
                    <td>行5</td>
                    <td>行5</td>
                    <td>行5</td>
                </tr>
                <tr>
                    <td>行6</td>
                    <td>行6</td>
                    <td>行6</td>
                </tr>
                <tr>
                    <td>行7</td>
                    <td>行7</td>
                    <td>行7</td>
                </tr>
                <tr>
                    <td>行8</td>
                    <td>行8</td>
                    <td>行8</td>
                </tr>
                <tr>
                    <td>行9</td>
                    <td>行9</td>
                    <td>行9</td>
                </tr>
                <tr>
                    <td>行10</td>
                    <td>行10</td>
                    <td>行10</td>
                </tr>
                <tr>
                    <td>行11</td>
                    <td>行11</td>
                    <td>行12</td>
                </tr>
                <tr>
                    <td>行12</td>
                    <td>行12</td>
                    <td>行12</td>
                </tr>
                <tr>
                    <td>行13</td>
                    <td>行13</td>
                    <td>行13</td>
                </tr>
                <tr>
                    <td>行14</td>
                    <td>行14</td>
                    <td>行14</td>
                </tr>
                <tr>
                    <td>行15</td>
                    <td>行15</td>
                    <td>行15</td>
                </tr>
                <tr>
                    <td>行16</td>
                    <td>行16</td>
                    <td>行16</td>
                </tr>
                <tr>
                    <td>行17</td>
                    <td>行17</td>
                    <td>行17</td>
                </tr>
                <tr>
                    <td>行18</td>
                    <td>行18</td>
                    <td>行18</td>
                </tr>
                <tr>
                    <td>行19</td>
                    <td>行19</td>
                    <td>行19</td>
                </tr>
                <tr>
                    <td>行20</td>
                    <td>行20</td>
                    <td>行20</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

效果
在这里插入图片描述
如果还有样式不太合适，就自己调一下吧。

一个table表头固定，内容可滚动的实用例子
10-20
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
Html中Table表头固定内容滚动以及checkbox右对齐
03-16
制作的样式中要求table表头固定，内容滚动，同时checkbox右对齐，支持全选
table原生实现横向纵向滚动
最新发布
shadouqi的博客
03-13 260
【代码】table实现横向纵向滚动。
table实现表头固定 内容滚动
马优晨
04-29 3967
效果图 代码实现部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
【经典思维】table 表头固定，内容自由滚动
在技术的广袤天地里，本博客如精准罗盘。剖析前沿科技，深掘代码奥秘，以精炼笔触，带您穿越复杂技术迷宫，速达知识彼岸。
05-09 1243
html> head> style type="text/css"> * {     margin: 0;     padding: 0; }   /*所有内容都在这个DIV内*/ .all {     width: 100%;     border: 1px solid #000000; }   /*表头在这个DIV内*/ .title {     wi
table头部固定，内容滚动
weixin_33921089的博客
04-28 393
可以设置两个table,th,td得设置宽度： <table> <thead> <tr><th></th></tr> </thead> </table> <div style="max-height:500px;over...
table表头固定内容滚动
06-09
如果想要实现表头固定内容滚动的效果，可以使用CSS中的position属性和JavaScript中的scroll事件来实现。具体的实现步骤如下： 1. 首先，将表格的表头和表格内容分别放入两个div中，并设置它们的class为"fixed-...
JS实现table表格固定表头且表头随横向滚动而滚动
10-19
效果图应当清晰地展示出固定表头和滚动内容的实际效果，以帮助理解代码实现的最终结果。 以上是对于JS实现table表格固定表头且表头随横向滚动而滚动相关知识点的总结和解析。希望对理解和实现类似效果有所帮助。...
BootStrap的table表头固定tbody滚动的实例代码
09-01
在本例中，我们关注的是如何在Bootstrap的表格（table）中实现表头（thead）固定而tbody部分滚动的效果。这种效果对于展示大量数据时特别有用，因为它允许用户在滚动浏览长列表时始终保持列标题可见。 首先，让我们...
table表头固定只让内容滚动
2³
07-15 4535
table表格实现表头固定，只内容滚动。
纯CSS实现表头固定表格滚动条效果
12-24
纯CSS实现表头固定表格滚动条效果，所需代码不多兼容浏览器。方便移植至JSP、ASP、PHP。好用记得评论喔
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
(简便)表头固定内容上下左右滚动
10-24
表头固定内容上下左右滚动jquery简便版
表格表头固定 内容可以滚动（示例）
12-21
表格表头固定 内容可以滚动（示例）： 表格表头固定，内容可以滚动，前提是表格在一个div中
用js实现table内容从下到上连续滚动
Programmer.Wenlong 小龙在线
04-03 1006
网上有很多用ul实现新闻列表滚动的例子，但是很少有直接用table实现列表内容滚动的例子，而Marquee标签滚动的效果不是很好，于是就自己写了一个，提供给攻城师朋友们参考 实现思路：由于table包含标题和内容，实际上理想的效果是标题不动，内容滚动，于是把标题和内容拆分出来放在两个table中 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 T...
element table头部固定，内容滚动
weixin_49511142的博客
04-01 2053
思路：首先我们要给table表格套一层父元素，然后获取这个父元素的高度，同时获取表格的表头的高度以及分页的高度。然后用父元素的高度减去表头和分页的高度即是table表格的高度，然后再把这个高度赋值给。2.然后我又想会不会是数据过多，我先获取了dom，然后数据渲染后的dom我们高度不一致，里面进行监听，等数据回来后再获取dom，这样总可以了吧，但是事实总是残酷的，又失败了。3. 最后大家别忘了销毁监听器。
Table的思索(二):表头固定而内容滚动的表格
热门推荐
甘焕的博客
08-03 2万+
产品要求表格的表头固定，而内容在超出table的高度后，还能自由滚动，难度较高，本文尝试了几种常用方法，但都经历了失败，最后给出了一种可行的解决方案。
表头固定,内容可滚动表格的3种实现方法
唐策的博客
11-03 6202
一、表格总宽度自动，每列宽度设置统一用设置 这种实现方法最简单，只需要用两个表格，一个表格作为表头，另一个表格用<div>包裹并设置该 <div> 的高度固定，高度溢出可滚动即可。两个表格的列宽用相同的<colgroup>固定列宽值，需要注意的是滚动条会占用一定的宽度，一般是：17px，所以在表头需要特别处理一下，不然表格就不能对齐了。大家看代码，最简单的办法是表头单独空一列和下面的表格滚动条对齐
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值