百变鹏仔-专注前端行业精选
table固定表头和列 css实现表格固定表头
作者:鹏仔先生日期:2024-04-16 10:00:07浏览:865分类:CSS
Hello,大家好,我是站长鹏仔,本次鹏仔开发的项目中,实现出功能如图所示,固定表格的头部和左侧,在超出时滚动条滚动悬浮,之前给大家写过一次表格表头固定,是用占位的方式(https://sharedbk.com/post/178.html),太麻烦了,本次给大家分享一个更简单的方法。
本次主要用到的css属性是粘性定位 position: sticky; 这个属性可以理解为 position: relative; 正常显示时没有任何变化,但是当页面滚动时,他就相当于 fixed 一样固定到某个位置,一般常用于标题、操作栏、表格表头等。
【PS】 需要配合 top、right、bottom、left 使用才会出现固定效果。
下方鹏仔简单给大家写的案列,可自行复制尝试。
<style> body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,h1,h2,h3,h4,h5,h6,fieldset,img,input { margin: 0; padding: 0; } body,html { width: 100%; min-height: 100%; } .table-layer{ width: 600px; max-height: 200px; overflow: scroll; background: rgba(0,0,0,.1); } table thead tr{ position: sticky; top: 0; z-index: 10; } .table-name{ background: #F5F5F5; position: sticky; left: 0px; z-index: 11; } .table-name div{ width: 128px; padding: 12px 8px; box-sizing: border-box; text-align: center; } .table-con{ min-width: 240px; padding: 12px 8px; box-sizing: border-box; } </style>
<div class="table-layer"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr style="background: #F5F5F5; top: 0;z-index: 12;"> <td class="table-name"> <div>姓名</div> </td> <td class="table-con"> <div>姓名</div> </td> <td class="table-con"> <div>姓名</div> </td> <td class="table-con"> <div>姓名</div> </td> <td class="table-con"> <div>姓名</div> </td> <td class="table-con"> <div>姓名</div> </td> </tr> </thead> <tr> <td class="table-name"> <div>姓名</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> </tr> <tr> <td class="table-name"> <div>姓名</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> </tr> <tr> <td class="table-name"> <div>姓名</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> </tr> <tr> <td class="table-name"> <div>姓名</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> </tr> <tr> <td class="table-name"> <div>姓名</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> <td class="table-con"> <div>鹏仔</div> </td> </tr> </table> </div>
手机扫码访问
猜你还喜欢
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 01-19 elementui多选上传 before-upload 格式效验错误总会触发before-remove (elementui多选上传on-success只执行了一次,只上传成功了一条)
- 10-08 vue按钮限制连点封装 自定义指令限制连点
- 09-14 nvm常用命令有哪些?nvm如何切换node版本?nvm如何下载node?
- 08-19 使用HBuilderX将vue或H5项目打包app
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
已有1位网友发表了看法:
访客 评论于 [2024-05-02 00:46:19] 回复
来这里不留个链接怎么对得起作为站长的我?好物榜:www.haowubang.net