快捷導(dǎo)航

響應(yīng)式表格之固定表頭的簡單實現(xiàn)

更新時間：2016年08月26日 10:44:39 投稿：jingxian

下面小編就為大家?guī)硪黄憫?yīng)式表格之固定表頭的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

數(shù)據(jù)展示時，表頭的固定，可以有更好的可讀性。

一、實現(xiàn)方式：

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>復(fù)制，并插入表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"); 
});

二、注意細(xì)節(jié)：

1、寬度自適應(yīng)、去除單元格間隙：
<table width="100%" cellpadding="0" cellspacing="0" ></table>

2、表格線：
直接<td>添加border，會出現(xiàn)邊線重合；添加屬性：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>行業(yè)板塊</th> 
      </tr> 
      <tr> 
        <td>1</td> 
        <td>光明乳業(yè)</td> 
        <td>600597</td> 
        <td>15.2</td> 
        <td>+6.23%</td> 
        <td>0.12%</td> 
        <td>食品飲料</td> 
      </tr> 
      <tr> 
        <td>2</td> 
        <td>光明乳業(yè)</td> 
        <td>600597</td> 
        <td>15.2</td> 
        <td>+6.23%</td> 
        <td>0.12%</td> 
        <td>食品飲料</td> 
      </tr> 
      <tr> 
        <td>3</td> 
        <td>光明乳業(yè)</td> 
        <td>600597</td> 
        <td>15.2</td> 
        <td>+6.23%</td> 
        <td>0.12%</td> 
        <td>食品飲料</td> 
      </tr> 
      <tr> 
        <td>4</td> 
        <td>光明乳業(yè)</td> 
        <td>600597</td> 
        <td>15.2</td> 
        <td>+6.23%</td> 
        <td>0.12%</td> 
        <td>食品飲料</td> 
      </tr> 
      <tr> 
        <td>5</td> 
        <td>光明乳業(yè)</td> 
        <td>600597</td> 
        <td>15.2</td> 
        <td>+6.23%</td> 
        <td>0.12%</td> 
        <td>食品飲料</td> 
      </tr> 
      <tr> 
        <td>6</td> 
        <td>光明乳業(yè)</td> 
        <td>600597</td> 
        <td>15.2</td> 
        <td>+6.23%</td> 
        <td>0.12%</td> 
        <td>食品飲料</td> 
      </tr> 
      <tr> 
        <td>7</td> 
        <td>光明乳業(yè)</td> 
        <td>600597</td> 
        <td>15.2</td> 
        <td>+6.23%</td> 
        <td>0.12%</td> 
        <td>食品飲料</td> 
      </tr> 
      <tr> 
        <td>8</td> 
        <td>光明乳業(yè)</td> 
        <td>600597</td> 
        <td>15.2</td> 
        <td>+6.23%</td> 
        <td>0.12%</td> 
        <td>食品飲料</td> 
      </tr> 
      <tr> 
        <td>9</td> 
        <td>光明乳業(yè)</td> 
        <td>600597</td> 
        <td>15.2</td> 
        <td>+6.23%</td> 
        <td>0.12%</td> 
        <td>食品飲料</td> 
      </tr> 
      <tr> 
        <td>10</td> 
        <td>光明乳業(yè)</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>

以上這篇響應(yīng)式表格之固定表頭的簡單實現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: