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

前端技术 2023/09/01 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>

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

本文地址：https://www.stayed.cn/item/2802

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案