table 表格固定表头和第一列、内容可滚动
整理了下：
<!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>
