css+jq固定标题表格table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> table{ border-spacing:0;} table, table td, table th{ border:1px solid #aaa; } table td, table th{padding:5px; border-left:0px;border-top:0px;} /*自定义行强制显示*/ #hide_tr{display: table-row!important;} /*自定义占位,但不显示大小及内容*/ #hide_tr *{margin-top: 0!important;;margin-bottom: 0!important;;padding-top: 0!important;;padding-bottom: 0!important;;border-top: 0!important;border-bottom: 0!important;height:0 !important; overflow:hidden;} </style> </head> <body style="margin:0px; padding:50px;"> <div > <table id="MyTable" style="width:960px;font-family:微软雅黑;color:#000;font-size:medium; " border="1" cellspacing="0" > <thead> <tr> <th style="width:100px;">姓名</th> <th style="width:200px;">语文</th> <th>数学</th> <th style="width:150px;">英语</th> </tr> </thead> <tbody> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222222222222222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> <tr> <td>姓名111</td> <td>语文2222</td> <td>数学3333</td> <td>英语4444</td> </tr> </tbody> </table> </div> </body> <script src='http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js'></script> <script> /** * @Author: lrxin * @Email: lrxin@msn.com * @DateTime: 2016-12-26 15:05:55 * @Description: 固定表格的表头 * 宽度为表格的宽,高度为不含滚动条浏览器的高度 */ function fix_table($obj){ //if(!$obj || $obj.length<=0 || ($('html').height() - $(window).height())<0) return false; $obj.show(); //最大高度为不包含滚动条的高度 var height = $obj.find('tbody').height() - ($('html').height() - $(window).height()) - 3; height=200-$obj.find('thead').outerHeight(true); console.log('height:',height); //设置表格内容高度和宽度 $obj.find('tbody').css({'max-width': $obj.width(),'overflow':'auto','max-height':height}); //移出复制的表头并重新添加 $obj.find("#hide_tr").remove(); //内容宽度自适应 //$obj.find('thead tr th').css('width','auto'); // 表头复制并插入到内容 $obj.find('tbody tr:first').before($obj.find('thead tr').clone()); var _th = $obj.find('thead th'); //移出内容的行信息并设置跟表头一样的宽度 $obj.find('tbody tr:first th').each(function(i,j){ $(this).html('').width($(_th[i]).width());}); //表格第一行内容不显示仅占位 $obj.find('tbody tr:first').attr('id','hide_tr').css('display','table-row'); //显示滚动条 $obj.find('tbody,thead tr,tfoot tr').css('display','block'); //表格内容宽 _th = $obj.find('#hide_tr th'); //表头th宽跟内容th宽一致 $obj.find('thead tr:first th').each(function(i,j){ $(this).width($(_th[i]).width());}); //页脚th宽跟内容th宽一致 $obj.find('tfoot tr:first th').each(function(i,j){ $(this).width($(_th[i]).width());}); console.log('----------------------------------'); console.log($obj.outerHeight(true)); } function fix_table_old($obj){ $thead = $obj.find('thead'); console.log($obj.find('thead').outerHeight(true)); console.log($obj.outerHeight(true)); //if(!$obj || $obj.length<=0 || ($('html').height() - $(window).height())<0) return false; $obj.show(); //最大高度为不包含滚动条的高度 var height = $obj.find('tbody').height() - ($('html').height() - $(window).height()) - 3; height=200-$obj.find('thead').outerHeight(true); //设置表格内容高度和宽度 $obj.find('tbody').css({'max-width': $obj.width(),'overflow':'auto','max-height':height}); //移出复制的表头并重新添加 $obj.find("#hide_tr").remove(); //内容宽度自适应 $obj.find('thead tr th').css('width','auto'); // 表头复制并插入到内容 $obj.find('tbody tr:first').before($obj.find('thead tr').clone()); var _th = $obj.find('thead th'); //移出内容的行信息并设置跟表头一样的宽度 $obj.find('tbody tr:first th').each(function(i,j){ $(this).html('').width($(_th[i]).innerWidth());}); //表格第一行内容不显示仅占位 $obj.find('tbody tr:first').attr('id','hide_tr').css('display','table-row'); //显示滚动条 $obj.find('tbody,thead tr,tfoot tr').css('display','block'); //表格内容宽 _th = $obj.find('tbody th'); //表头th宽跟内容th宽一致 $obj.find('thead tr:first th').each(function(i,j){ $(this).width($(_th[i]).width());}); //页脚th宽跟内容th宽一致 $obj.find('tfoot tr:first th').each(function(i,j){ $(this).width($(_th[i]).width());}); console.log('----------------------------------'); console.log($obj.outerHeight(true)); } $(function(){ var html = '',tr='<tr><td>学生#index#</td><td>#1#</td><td>#2#</td><td>#3#</td></tr>'; for(var i=1;i<=100;i++){ html += tr.replace("#index#",i).replace("#1#",10).replace("#2#",20).replace("#3#",30); } //$("#MyTable tbody").html(html); var a = fix_table($("#MyTable")); console.log(a); }); </script> </html>