因为bootstrap自带的固定列效果满足不了公司需求，所以借助fixed-table这个插件完成了iview固定列的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>左右两侧固定列，中间内容可以横向拖动</title> <link href="https://www.jb51.net/css/fixed-table.css" /> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="https://www.jb51.net/js/fixed-table.js"></script> <style> .fixed-table-box{ width: 800px; margin: 50px auto; } .fixed-table-box>.fixed-table_body-wraper{/*内容了表格主体内容有纵向滚动条*/ max-height: 260px; } .fixed-table_fixed>.fixed-table_body-wraper{/*为了让两侧固定列能够同步表格主体内容滚动*/ max-height: 240px; } .w-150{ width: 150px; } .w-120{ width: 120px; } .w-300{ width: 300px; } .w-100{ width: 100px; } .btns{ text-align: center; } .btns button{ padding: 10px 20px; } </style> </head> <body> <div> <!-- 表头 start --> <div> <table cellspacing="0" cellpadding="0"> <thead> <tr> <th data-fixed="true"><div>日期</div></th> <th><div>姓名</div></th> <th><div>省份</div></th> <th><div>市区</div></th> <th><div>地址</div></th> <th><div>邮编</div></th> <th data-fixed="true" data-direction="right"><div>操作</div></th> </tr> </thead> </table> </div> <!-- 表头 end --> <!-- 表格内容 start --> <div> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <td><div> 2016-05-03</div></td> <td><div>王小虎</div></td> <td><div>上海</div></td> <td><div>普陀区</div></td> <td><div>上海市普陀区金沙江路 1518 路</div></td> <td><div>200333</div></td> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td><div> 2016-05-03</div></td> <td><div>王小虎</div></td> <td><div>上海</div></td> <td><div>普陀区</div></td> <td><div>上海市普陀区金沙江路 1518 路</div></td> <td><div>200333</div></td> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td><div> 2016-05-03</div></td> <td><div>王小虎</div></td> <td><div>上海</div></td> <td><div>普陀区</div></td> <td><div>上海市普陀区金沙江路 1518 路</div></td> <td><div>200333</div></td> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td><div> 2016-05-03</div></td> <td><div>王小虎</div></td> <td><div>上海</div></td> <td><div>普陀区</div></td> <td><div>上海市普陀区金沙江路 1518 路</div></td> <td><div>200333</div></td> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td><div> 2016-05-03</div></td> <td><div>王小虎</div></td> <td><div>上海</div></td> <td><div>普陀区</div></td> <td><div>上海市普陀区金沙江路 1518 路</div></td> <td><div>200333</div></td> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td><div> 2016-05-03</div></td> <td><div>王小虎</div></td> <td><div>上海</div></td> <td><div>普陀区</div></td> <td><div>上海市普陀区金沙江路 1518 路</div></td> <td><div>200333</div></td> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td><div> 2016-05-03</div></td> <td><div>王小虎</div></td> <td><div>上海</div></td> <td><div>普陀区</div></td> <td><div>上海市普陀区金沙江路 1518 路</div></td> <td><div>200333</div></td> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td><div> 2016-05-03</div></td> <td><div>王小虎</div></td> <td><div>上海</div></td> <td><div>普陀区</div></td> <td><div>上海市普陀区金沙江路 1518 路</div></td> <td><div>200333</div></td> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> </tbody> </table> </div> <!-- 表格内容 end --> <!-- 固定列 start --> <div> <div> <table cellspacing="0" cellpadding="0"> <thead> <tr> <th><div>日期</div></th> </tr> </thead> </table> </div> <div> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <td><div> 2016-05-03</div></td> </tr> <tr> <td><div> 2016-05-03</div></td> </tr> <tr> <td><div> 2016-05-03</div></td> </tr> <tr> <td><div> 2016-05-03</div></td> </tr> <tr> <td><div> 2016-05-03</div></td> </tr> <tr> <td><div> 2016-05-03</div></td> </tr> <tr> <td><div> 2016-05-03</div></td> </tr> <tr> <td><div> 2016-05-03</div></td> </tr> </tbody> </table> </div> </div> <div> <div> <table cellspacing="0" cellpadding="0"> <thead> <tr> <th><div>操作</div></th> </tr> </thead> </table> </div> <div> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> <tr> <td> <div> <a href="###" >查看</a> <a href="###" >编辑</a> </div> </td> </tr> </tbody> </table> </div> </div> <!-- 固定列 end --> </div> <div> <button type="button">清空数据</button> <button type="button">添加数据</button> <button type="button">删除行</button> </div> <script> //初始化FixedTable $(".fixed-table-box").fixedTable(); //清空表格 $("#empty_data").on("click", function (){ $(".fixed-table-box").emptyTable(); }); //添加数据 $("#add_data").on("click", function (){ $(".fixed-table-box").addRow(function (){ var html = ''; for(var i = 0; i < 5; i ++){ html += '<tr>'; html += ' <td><div> 2016-05-03</div></td>'; html += ' <td><div>王小虎</div></td>'; html += ' <td><div>上海</div></td>'; html += ' <td><div>普陀区</div></td>'; html += ' <td><div>上海市普陀区金沙江路 1518 路</div></td>'; html += ' <td><div>200333</div></td>'; html += ' <td>'; html += ' <div>'; html += ' <a href="###" >查看</a>'; html += ' <a href="###" >编辑</a>'; html += ' </div>'; html += ' </td>'; html += '</tr>'; } return html; }); }); //删除指定行 $("#del_row").on("click", function (){ $(".fixed-table-box").deleteRow($(".fixed-table-box").children('.fixed-table_fixed-left').children('.fixed-table_body-wraper').find('tr').eq(0)); }); </script> </body> </html>
具体网址忘了存了，有需要的小伙伴可自己查一下~
次案例从一个网站下载，
实现效果为：
总结