csstable元素设置(CSS设置table下tbody的滚动条的实现)
类别:Web前端 浏览量:523
时间:2022-04-01 00:25:57 csstable元素设置
CSS设置table下tbody的滚动条的实现今天碰到一个关于对tabel的表的滚动事件,需求是表头不动,改变的是tbody,如果tbody里面的内容过多,让其进行滚动事件。
首先想到的就是利用css中overflow-y:scroll; 来进行内容的滚动,但是在处理tabel的display状态时,就将tabel表的布局给打乱了,如果给tabel的父级进行限制,则这个表会进行滚动。。。
在css上设置如下代码就可以了
table tbody { display:block; height:200px; overflow-y:scroll; -webkit-overflow-scrolling: touch; // 为了滚动顺畅 } table tbody::-webkit-scrollbar { display: none; // 隐藏滚动条 } table thead, tbody tr { display:table; width:100%; table-layout:fixed; } table thead { width: calc( 100% - 1em ) } table thead th{ background:#ccc;}
示例:table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>转载自·威易网CSS教程</title> <style> table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:table; width:100%; table-layout:fixed; } table thead { width: calc( 100% - 1em ) } table thead th{ background:#ccc;} </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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 去除网页滚动条
- csstable元素设置(CSS设置table下tbody的滚动条的实现)
- vue 怎么设置滚动条的长度(vue使用better-scroll实现横向滚动的方法实例)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- css控制滚动条的样式
- vue滚动条下拉翻页(Vue中利用better-scroll组件实现横向滚动功能)
- html自适应怎么没有滚动条(如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度)
- javascript 虚拟滚动条(JavaScript实现可拖拽的进度条)
- vue滚动条滚动事件(vue实现一个滚动条样式)
- css3行内样式表图解(详解css3自定义滚动条样式写法)
- vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
- css3伸缩布局及图解(利用CSS3实现自定义滚动条代码分享)
- css不显示滚动条设置(css隐藏移动端滚动条并且ios上平滑滚动的方法)
- 《金陵秘事》的剧情跌宕起伏 给观众带来的怎样的感官体验(金陵秘事的剧情跌宕起伏)
- 少儿口才表达影响未来一生,50首经典绕口令和孩子玩出聪明大脑(少儿口才表达影响未来一生)
- 玩网游居然让人更友善 很难以让人置信(玩网游居然让人更友善)
- 学好汉语拼音,从娃娃绕口令抓起,平时还是要多练 收藏好(从娃娃绕口令抓起)
- 仙女们的私藏鲜法大PK 鲜香切块牛肉(仙女们的私藏鲜法大PK)
- 天热没胃口 这道菜开胃又下饭,2个小技巧新手一学就会(这道菜开胃又下饭)
热门推荐
- MongoDB 日志文件太大
- C#快速排序
- 由于Web服务器上的“ISAPI 和CGI 限制”的解决方法
- python完整异常机制(深入理解Python异常处理的哲学)
- python扫描服务器端口(Python实现的对本地host127.0.0.1主机进行扫描端口功能示例)
- html5 拍照上传(Html5在手机端调用相机的方法实现)
- 如何激活ubunturoot账号(欧洲vps安装Ubuntu系统如何设置root登录)
- sqlserver数据库技术及应用教程(SQLServer2019 数据库的基本使用之图形化界面操作的实现)
- vmware虚拟机上建立http服务步骤(VMWare网络适配器三种模式实现过程解析)
- dedecms不能调用文章发布时间(dedecms文章页上一篇与下一篇标题长度截取的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9