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


Posted in Javascript onAugust 26, 2016

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

一、实现方式:

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>

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

Javascript 相关文章推荐
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 #Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 #Javascript
jquery 动态合并单元格的实现方法
Aug 26 #Javascript
轻松掌握JavaScript中介者模式
Aug 26 #Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 #Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 #Javascript
在线引用最新jquery文件的实现方法
Aug 26 #Javascript
You might like
社区(php&amp;&amp;mysql)五
2006/10/09 PHP
PHP中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
python实现两张图片的像素融合
2019/02/23 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python Canny边缘检测算法的实现
2020/04/24 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
学雷锋演讲稿
2014/03/04 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
导游词之神仙居景区
2019/11/15 职场文书