头部固定的table
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了头部固定的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的主要内容，如果未能解决你的问题，请参考以下文章