table表格，让thead固定，tbody有滚动条

最新推荐文章于 2023-04-04 17:49:52 发布
最新推荐文章于 2023-04-04 17:49:52 发布
阅读量2.8k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jasons_xie/article/details/80223095
版权 
<!DOCTYPE HTML>
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>table</title>
        <style>
</style>
    </head>
    
    <body>
        <table width="80%" border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>出生年月</th>
                    <th>手机号码</th>
                    <th>单位</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>18</td>
                    <td>1990-9-9</td>
                    <td>13682299090</td>
                    <td>阿里巴巴</td>
                </tr>
                <tr>
                    <td>张三封</td>
                    <td>18</td>
                    <td>1990-9-9</td>
                    <td>13682299090</td>
                    <td>阿里巴巴与四十大盗</td>
                </tr>
                <tr>
                    <td>张小三</td>
                    <td>18</td>
                    <td>1990-9-9</td>
                    <td>13682299090</td>
                    <td>腾讯科技</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>18</td>
                    <td>1990-9-9</td>
                    <td>13682299090</td>
                    <td>浏阳河就业</td>
                </tr>
                <tr>
                    <td>张三疯子</td>
                    <td>18</td>
                    <td>1990-9-9</td>
                    <td>13682299090</td>
                    <td>阿里巴巴</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>18</td>
                    <td>1990-9-9</td>
                    <td>13682299090</td>
                    <td>阿里巴巴</td>
                </tr>
                <tr>
                    <td>张大三</td>
                    <td>18</td>
                    <td>1990-9-9</td>
                    <td>13682299090</td>
                    <td>阿里巴巴</td>
                </tr>
                <tr>
                    <td>张三五</td>
                    <td>18</td>
                    <td>1990-9-9</td>
                    <td>13682299090</td>
                    <td>阿里巴巴</td>
                </tr>
                <tr>
                    <td>张刘三</td>
                    <td>18</td>
                    <td>1990-9-9</td>
                    <td>13682299090</td>
                    <td>阿里巴巴</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>18</td>
                    <td>1990-9-9</td>
                    <td>13682299090</td>
                    <td>阿里巴巴</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

 

「已注销」
关注
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
08-29
table表格，让thead固定，tbody有滚动条， 关键是都对齐的纯css写法关键是都对齐的纯css写法
table表格的thead固定，tbody展示出滚动条
m0_66226018的博客
12-12 1604
我也是做了两次的table表格的thead固定，tbody展示出滚动条，第一次因为是存在有表头合并的原因没有做出来完好的效果，第二次是不仅有表头的合并，还有tbody中的rowspan的合并。
thead固定tbody滚动 table的局部滚动
makelucky的博客
11-01 401
最近在写后台管理系统，在数据的显示上，table如果整体滚动的话，头部信息就会滚到消失，这样显示不太友好，百度了很多，终于实现了这种方法。 首先thead设置 thead{ display:table/inline-block; } 然后tbody设置 tbody{ display:inline-block;//或者block height:300px;//设置...
table表格，thead固定，tbody滚动
icemwj的博客
04-04 878
table表格，thead固定，tbody滚动
表格thead固定 tbody滚动
weixin_45264424的博客
03-23 143
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <style> table tbody { display: block; height: 195px;
table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法
最新发布
01-07
要实现table表格，让thead固定，tbody有滚动条，并且让它们的对齐，可以使用纯CSS来实现。首先，我们可以使用position: sticky;来让thead固定在顶部，然后设置overflow-y: scroll;来给tbody添加垂直滚动条。另外，...
CSS设置table下tbody的滚动条的实现
09-22
CSS设置table下tbody的滚动条实现是一种网页布局技术，能够让HTML表格的tbody部分在内容超出可视区域时显示出垂直滚动条，而thead（表头）则保持固定不动。这种技术在制作具有大量数据内容的网页表格时非常有用，...
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...
固定table的thead表头
11-11
固定table的thead表头
Html中Table表头固定内容滚动以及checkbox右对齐
03-16
制作的样式中要求table表头固定，内容滚动，同时checkbox右对齐，支持全选
用css给tbody加垂直滚动条的具体思路及样式代码
12-13
思路就是 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度 width:200px 代码如下： 复制代码代码如下: <table class=”table”> <thead> <tr> <th>Id</th> <th>Name</th> <th>Category</th> <th>MonthAmount</th> <th>hasBackUp</th> <th>score</th> </tr> </thead> <
HTML table表格 固定表头 tbody加滚动条
沐枫
12-31 2万+
纯CSStable表格thead固定tbody滚动效果 由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！ 实现思路： 将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed;...
原生table:表格table中thead固定，tbody超出高度出现滚动条
热门推荐
qq_37899792的博客
05-16 2万+
首先认识一下表格的table-layout属性 tableLayout 属性用来显示表格单元格、行、列的算法规则。 tableLayout有如下三个值：autofixedinherit 值 描述 auto 默认。列（td，th）宽度由单元格内容设定。 (1) 给td指定的width不一定生效，td的width会自动调整 (2) text-overflo...
如何实现thead固定不动，tbody出现垂直滚动条
袁建龙的专栏
05-06 7922
多套一个div，用两个table控制，标题一个table，内容一个table。给内容多套一个div，设置高度后 overflow-y: auto;
table表格固定thead，tbody可滑动
一只程序喵
11-12 1311
效果图： html: <table width="80%" border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>出生年月</th> <th>手机号码</th&g
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值