響應式表格之固定表頭的簡單實現
編輯：關於JavaScript
數據展示時，表頭的固定，可以有更好的可讀性。
一、實現方式：
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(){<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>
以上這篇響應式表格之固定表頭的簡單實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。
小編推薦
熱門推薦