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


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 相关文章推荐
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
Java中Timer的用法详解
Oct 21 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
vue 虚拟DOM的原理
Oct 03 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
WINXP下apache+php4+mysql
2006/11/25 PHP
php print EOF实现方法
2009/05/21 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
drupal 代码实现URL重写
2011/05/04 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
javascript 禁止复制网页
2009/06/11 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
WebPack基础知识详解
2017/01/16 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
高中生活自我鉴定
2014/01/18 职场文书
会计系毕业求职信
2014/08/07 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
毕业实习单位意见
2015/06/04 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
同学聚会祝酒词
2015/08/10 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
Python实现随机生成迷宫并自动寻路
2021/06/13 Python