码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-08-26 10:41:18      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:

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

一、实现方式:
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>

  

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

标签:

原文地址:http://www.cnblogs.com/chaoli/p/5809195.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!