响应式表格之固定表头的实现

Posted 2020-08-04 乖乖脸很大

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式表格之固定表头的实现相关的知识，希望对你有一定的参考价值。

数据展示时，表头的固定，可以有更好的可读性。

一、实现方式：
1、定义2个表格，一个absolute固定

<div class="table1-wapper">
   <table width="100%" cellpadding="0" cellspacing="0" id="table1">
      <tr><th><div>序号</div></th><th><div>股票名称</div></th>...</tr>
       <tr>...</tr>
  </table>
</div>
 <div class="fixed-table1-wapper">
  <table width="100%" cellpadding="0" cellspacing="0" id="fixed-table1">
 </table>
</div>

2、表1<th>复制，并插入表2

var th_new=$("#table1 tr").eq(0).clone();
$("#fixed-table1").append(th_new);

3、resize()方法，实时获取表1各列<th>宽度

function trResize(){
	$("#fixed-table1 th").each(function(){
	var num=$(this).index();
	var th_width=$("#table1 th").eq(num).width();
	$(this).css("width",th_width+"px");
	});
}

4、页面过小时，表格滚动带表头滚动

$(".table1-wapper").scroll(function(){
	var scroll=-$(this).scrollLeft()
	$(".fixed-table1-wapper").css("left",scroll+"px");
});

二、注意细节：

1、宽度自适应、去除单元格间隙：
<table width="100%" cellpadding="0" cellspacing="0" ></table>

2、表格线：
直接<td>添加border，会出现边线重合；添加属性：border-collapse: collapse;

3、td宽度：
控制第一行宽度即可<td width="70"></td> / <td width="20%"></td>

4、奇偶行颜色不同：
css: #table1 tr:nth-child(2n){background-color:#ccc;} ie7兼容性问题
jquery: $("#table1 tr:even").css("background-color","#ccc");

以下为完整代码：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格整理</title>
<link rel="stylesheet" type="text/css" href="css/basic.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
html{overflow:auto;}
.table-wapper{width:100%;margin:30px auto;font-size:16px;position:relative;overflow:hidden;}
.table1-wapper{height:200px;overflow-y:auto;}
.table-wapper table{border:1px solid #f00;line-height:2;border-collapse: collapse;white-space:nowrap;}
.table-wapper th{font-size:18px;font-weight:normal;background-color:#dbdbdb;}
.table-wapper td{text-align:center;border:1px solid #f00;}
.fixed-table1-wapper{position:absolute;top:0px;left:0px;background-color:#dbdbdb;}
/*#table1 tr:nth-child(2n){background-color:#ccc;}*/
</style>
</head>
<body >
<div class="table-wapper">
	<div class="table1-wapper">
		<table width="100%" cellpadding="0" cellspacing="0" id="table1">
			<tr>
				<th>序号</th>
				<th>股票名称</th>
				<th>股票代码</th>
				<th>成交</th>
				<th>涨跌幅</th>
				<th>换手率</th>
				<th>行业板块</th>
			</tr>
			<tr>
				<td>1</td>
				<td>光明乳业</td>
				<td>600597</td>
				<td>15.2</td>
				<td>+6.23%</td>
				<td>0.12%</td>
				<td>食品饮料</td>
			</tr>
			<tr>
				<td>2</td>
				<td>光明乳业</td>
				<td>600597</td>
				<td>15.2</td>
				<td>+6.23%</td>
				<td>0.12%</td>
				<td>食品饮料</td>
			</tr>
			<tr>
				<td>3</td>
				<td>光明乳业</td>
				<td>600597</td>
				<td>15.2</td>
				<td>+6.23%</td>
				<td>0.12%</td>
				<td>食品饮料</td>
			</tr>
			<tr>
				<td>4</td>
				<td>光明乳业</td>
				<td>600597</td>
				<td>15.2</td>
				<td>+6.23%</td>
				<td>0.12%</td>
				<td>食品饮料</td>
			</tr>
			<tr>
				<td>5</td>
				<td>光明乳业</td>
				<td>600597</td>
				<td>15.2</td>
				<td>+6.23%</td>
				<td>0.12%</td>
				<td>食品饮料</td>
			</tr>
			<tr>
				<td>6</td>
				<td>光明乳业</td>
				<td>600597</td>
				<td>15.2</td>
				<td>+6.23%</td>
				<td>0.12%</td>
				<td>食品饮料</td>
			</tr>
			<tr>
				<td>7</td>
				<td>光明乳业</td>
				<td>600597</td>
				<td>15.2</td>
				<td>+6.23%</td>
				<td>0.12%</td>
				<td>食品饮料</td>
			</tr>
			<tr>
				<td>8</td>
				<td>光明乳业</td>
				<td>600597</td>
				<td>15.2</td>
				<td>+6.23%</td>
				<td>0.12%</td>
				<td>食品饮料</td>
			</tr>
			<tr>
				<td>9</td>
				<td>光明乳业</td>
				<td>600597</td>
				<td>15.2</td>
				<td>+6.23%</td>
				<td>0.12%</td>
				<td>食品饮料</td>
			</tr>
			<tr>
				<td>10</td>
				<td>光明乳业</td>
				<td>600597</td>
				<td>15.2</td>
				<td>+6.23%</td>
				<td>0.12%</td>
				<td>食品饮料</td>
			</tr>
		</table>
	</div>
	 <div class="fixed-table1-wapper">
		<table width="100%" cellpadding="0" cellspacing="0" id="fixed-table1">
			
		</table>
	</div> 
</div>
<script type="text/javascript">
$(function(){
　　　　 $("#table1 tr:even").css("background-color","#ccc");　 //奇偶行颜色
	var inner_width=$("#table1").outerWidth();
	$(".fixed-table1-wapper").css("width",inner_width+"px");
	var th_new=$("#table1 tr").eq(0).clone();
	$("#fixed-table1").append(th_new);

})

$(window).resize(function(){
	trResize();
});

$(".table1-wapper").scroll(function(){
	var scroll=-$(this).scrollLeft()
	$(".fixed-table1-wapper").css("left",scroll+"px");
});

function trResize(){
	var inner_width=$("#table1").outerWidth();
	$(".fixed-table1-wapper").css("width",inner_width+"px");
	$("#fixed-table1 th").each(function(){
		var num=$(this).index();
		var th_width=$("#table1 th").eq(num).width();
		//console.log("th_width:"+th_width);
		$(this).css("width",th_width+"px");
	});
}

</script>
</body>
</html>

以上是关于响应式表格之固定表头的实现的主要内容，如果未能解决你的问题，请参考以下文章

[Unity] Shader(着色器）之固定管线