首页 > 代码库 > 头部固定的table
头部固定的table
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>头部固定table</title> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width"/> <style> div, table{ margin:0; padding:0; } table{ border-collapse:collapse; border-spacing:0; } .m-tb-fit{ position: relative; table-layout: fixed; line-height: 1.5; } .m-tb-fit th, .m-tb-fit td{ padding: 5px; border: 1px solid #ddd; } .g-w600{ width: 600px; } .g-tb-fit{ width: 300px; height: 500px; overflow: hidden; } .g-tb-fit .g-tb-cont{ position: relative; top: -1px; overflow: auto; height: 200px; } </style> </head> <body> <div class="g-tb-fit"> <table class="m-tb-fit hd g-w600"> <thead> <tr> <th width="90">1</th> <th width="90">22</th> <th width="90">333</th> <th width="90">4444</th> <th width="90">55555</th> <th>666666</th> </tr> </thead> </table> <div class="g-tb-cont"> <table class="m-tb-fit g-w600"> <tbody> <tr> <td width="90">111111</td> <td width="90">22222</td> <td width="90">3333</td> <td width="90">444</td> <td width="90">55</td> <td>6</td> </tr> <tr> <td>111111</td> <td>22222</td> <td>3333</td> <td>444</td> <td>55</td> <td>6</td> </tr> <tr> <td>111111</td> <td>22222</td> <td>3333</td> <td>444</td> <td>55</td> <td>6</td> </tr> <tr> <td>111111</td> <td>22222</td> <td>3333</td> <td>444</td> <td>55</td> <td>6</td> </tr> <tr> <td>111111</td> <td>22222</td> <td>3333</td> <td>444</td> <td>55</td> <td>6</td> </tr> <tr> <td>111111</td> <td>22222</td> <td>3333</td> <td>444</td> <td>55</td> <td>6</td> </tr> <tr> <td>111111</td> <td>22222</td> <td>3333</td> <td>444</td> <td>55</td> <td>6</td> </tr> <tr> <td>111111</td> <td>22222</td> <td>3333</td> <td>444</td> <td>55</td> <td>6</td> </tr> <tr> <td>111111</td> <td>22222</td> <td>3333</td> <td>444</td> <td>55</td> <td>6</td> </tr> <tr> <td>111111</td> <td>22222</td> <td>3333</td> <td>444</td> <td>55</td> <td>6</td> </tr> <tr> <td>111111</td> <td>22222</td> <td>3333</td> <td>444</td> <td>55</td> <td>6</td> </tr> </tbody> </table> </div> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script> function tabFitScroll(box, hd, cont) { var _tb_box = box, _tb_hd = hd, _tb_cont = cont; $(_tb_box + ‘ ‘ + _tb_cont).scroll(function () { var $t = $(this); $(_tb_box + ‘ ‘ + _tb_hd).css(‘left‘, -$t.scrollLeft()); }); } $(function () { tabFitScroll(‘.g-tb-fit‘, ‘.m-tb-fit.hd‘, ‘.g-tb-cont‘); }); </script> </body> </html>
头部固定的table
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。