你的位置:首页 > 网页设计

[网页设计]响应式表格之固定表头的实现


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

一、实现方式:
1、定义2个表格,一个absolute固定

<div >  <table width="100%" cellpadding="0" cellspacing="0" id="table1">   <tr><th><div>序号</div></th><th><div>股票名称</div></th>...</tr>    <tr>...</tr> </table></div> <div > <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 >	<div >		<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 >		<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>