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


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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
一百多行代码实现react拖拽hooks
Mar 23 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 Undefined index报错的修复方法
2011/07/17 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
PHP如何实现跨域
2016/05/30 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
Element InputNumber计数器的使用方法
2020/07/27 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
收集的几个Python小技巧分享
2014/11/22 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python实现手机通讯录搜索功能
2018/02/22 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
django 中QuerySet特性功能详解
2019/07/25 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
基于python代码批量处理图片resize
2020/06/04 Python
python语言的优势是什么
2020/06/17 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
判断单链表中是否存在环
2012/07/16 面试题
法学专业应届生求职信
2013/10/16 职场文书
师范生教育见习总结
2015/06/23 职场文书