废话不多说,直接代码。
<!DOCTYPE> <html> <head> <meta charset="utf-8"/> <script src="jquery.js"></script> <script src="./dist/jquery.fixed.table.js"></script> <script src="./dist/index.js"></script> <link rel="stylesheet/less" type="text/css" href="index.less" /> <script src="./node_modules/less/dist/less.js"></script> </head> <body> <div> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> <th>性别</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> <tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr><tr> <td>张dddd三</td> <td>25</td> <td>3班</td> <td>男</td> <td>80</td> </tr> </tbody> </table> </div> </body> </html>
*{ margin: 0px; padding: 0px; font-size: 14px; font-family: '微软雅黑'; } table{ border-collapse: collapse; 100%; } table thead th{ font-weight: inherit; } table td, table th{ padding-left: 10px; height: 40px; line-height: 40px; text-align: left; } table thead{ background-color: #05dfec; color: white; } table tbody tr:hover, .fixed-table:hover, .fixed-table:hover div, table thead tr:hover{ background-color: #05c4d0; } div{ height: 100%; overflow-y: scroll; } .fixed-table{ position: fixed; left: 0px; top: 0px; right: 0px; height: 40px; overflow: hidden; } .fixed-table thead{ visibility: hidden; } .fixed-table div{ display: inline-block; padding-left: 10px; overflow: hidden; background-color: #05dfec; color: white; height: 40px; line-height: 40px; }
$(document).ready(function () { $('table').tables({fixedTop: 1}); });
(function($) { $.fn.tables = function(options) { var self = this; this.options = options; this.dom = $(this); this.thead = this.dom.find('thead'); this.tbody = this.dom.find('tbody'); this.fixedTop = this.options.fixedTop; this.dom.parent().scroll(function() { var scrollTop = $(this).scrollTop(); if (scrollTop >= self.fixedTop) { self.setFix(); } else { self.clearFix(); } }); this.setFix = function() { if (this.dom.parent().find('.fixed-table').length) { return; } this.dom.parent().prepend(`<div class="fixed-table">${this.getThead()}</div>`); } this.clearFix = function() { this.dom.parent().find('.fixed-table').remove(); } this.getThead = function() { var headHtml = ''; this.thead.find('th').each(function () { var _w = $(this).width(); var _v = $(this).text(); headHtml += `<div style=" ${_w}px;">${_v}</div>`; }); return headHtml; } this.onresize = function() { this.thead.find('th').each(function () { var _w = $(this).width(); var _i = $(this).index(); self.parent().find(`.fixed-table div:eq(${_i})`).width(_w); }); } $(window).resize(function () { self.onresize(); }); } })($);
效果: