HTML页面table滚动条的实现

##table scrollbar & header fixed

有很多页面由于数据量过大,会产生横纵滚动条。为了便于使用者观看,我们要把表头固定一下。根据这个需求写了个demo来实现这个功能。

主要解决了几点问题:
1.table实现横纵滚动条
2.table表头固定
3.table列宽自适应
4.table内容不换行

主要代码块

css:

			.table-scroll {
   
				width: calc(100% - 5px);
				overflow-x: scroll;
				white-space: nowrap;
			}
			
			.table-scroll table {
   
				table-layout: fixed;
				width: calc(100% - 10px);
				background-color:darkseagreen ;
			}
			
			.table-scroll thead {
   
				display: table-row;
				background-color: bisque;
			}
			
			.table-scroll tbody {
   
				overflow-y: scroll;
				overflow-x: hidden;
				display: block;
				height: calc(100vh - 300px);
			}
			
			.table-scroll th,td {
   
				width: 160px;
				overflow: hidden;
				text-overflow: ellipsis;
				min-width: 160px;
				border: 1px solid #808080;
			}
			
			h4, h5 {
   
				color: cornflowerblue;
			}

js:

	$(function() {
   
	    	$('.table-scroll').scroll(function() {
   
				  $('.table-scroll table').width($('.table-scroll').width() 
				  + $('.table-scroll').scrollLeft());
				});
				
				var tableTdWidths = new Array();
		    var tableWidth = 0;
		    var tableTr0Width = 0;
		    var tableThNum = 0;
		    var tableTr1Width = 0;
		    
				tableWidth = $('.table-scroll table').css('width').replace('px','');
				tableThNum = $('.table-scroll tr:eq(0)').children('th').length;
	    	
	    	if ($('.table-scroll tr').length == 1) {
    // header only
	    		if (tableWidth > tableTr0Width) {
   
	    			$('.table-scroll tr:eq(0)').children('th').each(function(i){
   
			    		$(this).width(parseInt(($(this).css('width').replace('px','')) 
			    		+ parseInt(Math.floor((tableWidth - tableTr0Width) / tableThNum))) + 'px');
			    	});
	    		}
	    	} else {
    // header and body
	    		tableTr1Width = $('.table-scroll tr:eq(1)').css('width').replace('px','');
					$('.table-scroll tr:eq(1)').children('td').each(function(i){
   
		    		tableTdWidths[i]=$(this).css('width').replace('px','');
		    	});
		    	$('.table-scroll tr:eq(0)').children('th').each(function(i) {
   
			if(parseInt($(this).css('width').replace('px', '')) >
				parseInt(tableTdWidths[i])) {
   
				tableTdWidths[i] = $(this).css('width').replace('px','');
		    		}
		    	});
		    	
	    		if (tableWidth > tableTr1Width) {
   
			    	//set all th td width
			    	$('.table-scroll tr').each(function(i){
   
			    			$(this).children().each(function(j){
   
			    				$(this).css('min-width',(parseInt(tableTdWidths[j]) 
			    				+ parseInt(Math.floor((tableWidth - tableTr1Width) / 
			    				tableThNum))) + 'px');
			    			});
		    		});
	    		} else {
   
	    			//method 1 : set all th td width
			    	$('.table-scroll tr').each(function(i){
   
			    			$(this).children().each(function(j){
   
			    				$(this).css('min-width',tableTdWidths[j] + 'px');
			    			});
		    		});
		    	}
	    	}
			});		

html:

	<body>
		<h4>完成效果:1.固定表头 2.table横纵滚动条 3.table列宽自适应 4.table内容不换行</h4>
		<div class="table-scroll">
			<table>
				<thead>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
					<th>title1</th>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
						<td>body1</td>
					</tr>
					<tr>
						<td>2<

你可能感兴趣的:(HTML,html,scrollbar,head-fixed,滚动条,固定表头)