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


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 String 对象
Apr 25 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
javascript if条件判断方法小结
May 17 Javascript
javascript常见用法总结
May 22 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
JavaScript鼠标悬停事件用法解析
May 15 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中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
PHP防止跨域提交表单
2013/11/01 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
Jquery ui css framework
2010/06/28 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python中property属性实例解析
2018/02/10 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
python线程池threadpool实现篇
2018/04/27 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python requests库的使用
2021/01/06 Python
文员岗位职责
2013/11/09 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
老兵退伍标语
2014/10/07 职场文书
向女朋友道歉的话
2015/01/20 职场文书
个人总结与自我评价
2015/02/14 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
十八大观后感
2015/06/12 职场文书
大队委员竞选稿
2015/11/20 职场文书
spring boot实现文件上传
2022/08/14 Java/Android