JS+CSS - table 表格固定表头和第一列、内容可滚动 (转载)
2023-09-14 08:57:23 时间
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; } table { width: 100%; text-align: center; border-collapse: collapse; border-spacing: 0; } table td { word-break: break-all; word-wrap: break-word; } .container { width: 600px; height: 500px; padding: 0; box-sizing: border-box; } #left-div { width: 80px; float: left; } #left-div1 { width: 100%; } #left-div2 { width: 100%; height: 250px; overflow: hidden; } #left-table2 { margin-bottom: 4px; } #right-div { float: left; width: 240px; } #right-div1 { width: 100%; overflow: hidden; } #right-div2 { width: 100%; height: 250px; overflow: auto; } #right-table1 { width: 320px; } #right-table2 { width: 320px; overflow: auto; } th, td { height: 50px; width: 80px; line-height: 50px; overflow: hidden; text-align: center; } th { color: #1E304F; background-color: #F3F8FF; } td { color: #384967; } tr:nth-of-type(odd) { background: #E7F2FF; } /*可以美化一下滚动条*/ #right-div2::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; height: 4px; } #right-div2::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); } #right-div2::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: rgba(0, 0, 0, 0.1); } </style> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { //生成表格内容 let htmlLeft = ''; let htmlRight = ''; for (let i = 1; i <= 7; i++) { htmlLeft += '<tr>'; htmlLeft += '<td>' + i + '</td>'; htmlLeft += '</tr>'; } for (let i = 1; i <= 7; i++) { htmlRight += '<tr>'; htmlRight += '<td>A</td>'; htmlRight += '<td>100</td>'; htmlRight += '<td>500</td>'; htmlRight += '<td>1</td>'; htmlRight += '</tr>'; } $('#left-table2').html(htmlLeft); $('#right-table2').html(htmlRight); //滚动 $('#right-div2').on('scroll', function () { let top = $(this).scrollTop(); let left = $(this).scrollLeft(); $('#left-div2').scrollTop(top); $('#right-div1').scrollLeft(left); }) }); </script> </head> <body> <div class="container"> <div id="left-div"> <div id="left-div1"> <table> <tr> <th>编号</th> </tr> </table> </div> <div id="left-div2"> <table id="left-table2"></table> </div> </div> <div id="right-div"> <div id="right-div1"> <table id="right-table1"> <tr> <th>设备名称</th> <th>设备类型</th> <th>故障类型</th> <th>故障状态</th> </tr> </table> </div> <div id="right-div2"> <table id="right-table2"></table> </div> </div> </div> </body> </html>
相关文章
- 【node.js】谈一下自己关于多系统共用账号的一点实践
- 【罗盘时钟—使用html,js,css编写。附源代码及效果】
- 原生HTML+CSS+JS制作自己的导航主页(前端大作业,源码+步骤详解)
- 精读《我们为何弃用 css-in-js》
- 最全的js正则表达式用法大全_js正则表达式语法大全
- CSS 换行_css不允许换行
- js手写面试题总结
- 个人笔记(js+css篇二)
- 「 [学习记录] JS 类型转换 - 隐式转换 」
- html+css+js+python(QtWebEngineWidgets) 实现微信聊天界面-包括时间,文件,纯文本等
- HTML+css+js代码春节灯笼
- clipboard.js:最轻便的复制页面内容到剪切板的JS
- JS中的CSS选择器
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- JS将文件传输至MySQL数据库(.js传文件至mysql)
- JS控制CSS样式的方法
- IE和FireFox(FF)中js和css的不同
- JS+CSS实现的一种交互体验表单页面
- js+css使文本框自动适应内容的高度
- 远离JS灾难css灾难之js私有函数和css选择器作为容器
- JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
- JS、CSS加载中的小问题探讨
- PHP小技巧之JS和CSS优化工具Minify的使用方法
- js与css实现弹出层覆盖整个页面的方法
- js获取时间并实现字符串和时间戳之间的转换
- 详解js闭包