相信我,天才无法与我媲美

css+jq固定标题表格table

2017-12-25

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>

下载地址:https://pan.baidu.com/s/1boSVYY7

作者:lrxin | Categories:CSSjQuery特效 | Tags:

发表评论