首页 > 代码库 > 响应式表格之固定表头的实现
响应式表格之固定表头的实现
数据展示时，表头的固定，可以有更好的可读性。
一、实现方式：
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="http://www.mamicode.com/css/basic.css"><script type="text/javascript" src="http://www.mamicode.com/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>
响应式表格之固定表头的实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。