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

时间：2021-05-26

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

一、实现方式：

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;} </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(){<BR>　　　　 $("#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>

以上这篇响应式表格之固定表头的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章