百变鹏仔-专注前端行业精选
纯html+css固定表格一列或多列,其余进行横向滚动的方法
作者:鹏仔先生日期:2020-06-16 11:45:43浏览:6667分类:HTML
纯html+css固定表格一列或多列,其余进行横向滚动的方法
工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面的relative定位并给left值为前面的总宽度,就这样做了,发现是有问题的,具体啥问题就不多说了,如真想研究,自己尝试吧。
当然,网上有很多插件的,比较好用,也建议大家使用插件吧,如TableFreeze-master
插件下载
蓝奏网盘:点击下载
下面给大家分享一下我的另个想法,纯html+css实现:
就用固定一列做个简单的demo,外面最大的盒子“layer-box”加定位relative,里面的盒子“layer”加滚动条,接下来就是表格的样式了,给第一列“td-1”需要固定的添加定位absolute,并设置固定宽度,z-index属性,那么他就默认定位到起始位置了。接下来是重点,我们需要多加一列来占位,“<td><div class="zhanwei"></div></td>”中的div设置需要固定的第一列的宽度,如设有边框,记得减掉,通过他占位,将后面所有的列都向后挤了一定的距离,就好了,大体思路就是这样。
如果固定两列,那么第二列的left值等于第一列的宽度,占位的宽度等于前面所有固定列的宽度和即可。
当然,你也可以让最后一列或多列固定,方法一样,给最后一列的前一列进行占位,思路相反想一下。
附完整demo
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定第一列</title> <style> *{ margin: 0; padding: 0; } body{ padding: 100px; box-sizing: border-box; } table{ border-collapse: collapse; } td,th{ color: #333; font-size: 14px; border-right: 1px solid #333; line-height: 30px; box-sizing: border-box; white-space: nowrap; background: #fff; } .layer-box{ width: 700px; overflow: hidden; position: relative; border: 1px solid #000; } .layer{ width: 700px; overflow: hidden; overflow-x: scroll; } .td-1{ position: absolute; left: 0; z-index: 2; width: 150px; } .zhanwei{ width: 149px; } table tr:nth-child(odd) td, table tr:nth-child(odd) th{ background: #f7f8f9; } </style> </head> <body> <div class="layer-box"> <div class="layer"> <table> <tr> <th class="td-1">我是第一个</th> <th><div class="zhanwei"></div></th> <th>我是第二个</th> <th>我是第三个</th> <th>我是第四个</th> <th>我是第五个</th> <th>我是第六个</th> <th>我是第七个</th> <th>我是第八个</th> <th>我是第九个</th> <th>我是第十个</th> </tr> <tr> <td class="td-1">我是第一个</td> <td><div class="zhanwei"></div></td> <td>我是第二个</td> <td>我是第三个</td> <td>我是第四个</td> <td>我是第五个</td> <td>我是第六个</td> <td>我是第七个</td> <td>我是第八个</td> <td>我是第九个</td> <td>我是第十个</td> </tr> <tr> <td class="td-1">我是第一个</td> <td><div class="zhanwei"></div></td> <td>我是第二个</td> <td>我是第三个</td> <td>我是第四个</td> <td>我是第五个</td> <td>我是第六个</td> <td>我是第七个</td> <td>我是第八个</td> <td>我是第九个</td> <td>我是第十个</td> </tr> <tr> <td class="td-1">我是第一个</td> <td><div class="zhanwei"></div></td> <td>我是第二个</td> <td>我是第三个</td> <td>我是第四个</td> <td>我是第五个</td> <td>我是第六个</td> <td>我是第七个</td> <td>我是第八个</td> <td>我是第九个</td> <td>我是第十个</td> </tr> </table> </div> </div> </body> </html>
- 上一篇:共享博客-改版公告
- 下一篇:使用c3动画实现摇铃铛效果
手机扫码访问
猜你还喜欢
- 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-16 table固定表头和列 css实现表格固定表头
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 01-19 elementui多选上传 before-upload 格式效验错误总会触发before-remove (elementui多选上传on-success只执行了一次,只上传成功了一条)
- 10-08 vue按钮限制连点封装 自定义指令限制连点
- 12-28 PHP的语法
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论,来添加一个吧。