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

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

一、实现方式：

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>

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

赞 (0)

相关推荐

  • 基于jquery的表头固定的若干方法

    A:使用JQuery UI插件,用DIV替换table,overflow-y:hidden达到滚动,让 thead绝对定位达到固定的目的,方法如下: 复制代码 代码如下: (function($){ $.chromatable = { defaults: { width: "900px", height: "300px", scrolling: "yes" } }; $.fn.chromatable = function(options){ va

  • Java 对10个数进行排序的实现代码

    题目:对10个数进行排序 程序分析:可以利用选择法,即从后9个比较过程中,选择一个最小的与第一个元素交换, 下次类推,即用第二个元素与后8个进行比较,并进行交换. 程序设计: import java.util.Arrays; import java.util.Random; import java.util.Scanner; public class Ex28 { public static void main(String[] args) { int arr[] = new int[11];

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

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

    数据展示时,表头的固定,可以有更好的可读性. 一.实现方式: 1.定义2个表格,一个absolute固定 <div class="table1-wapper"> <table width="100%" cellpadding="0" cellspacing="0" id="table1"> <tr><th><div>序号</div>&l

  • bootstrap响应式表格实例详解

    bootstrap响应式表格实例详解

    Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机,现在就bootstrap的响应式举一个例子: 如上图所示,要实现该表格在手机等移动端上只显示代号.名称.和价格,其他以查看详情的方式显示(也就是下图:) 首先,先实现在移动端能由左图到右图的转换: 代码如下: <meta charset="UTF-8"> <title></title> <!--引入bootstrap的css文件--> <link type=&

  • Bootstrap响应式表格详解

    Bootstrap响应式表格详解

    Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机 下面是手机端显示的样式 代码如下: 1.test.php <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link type="text/css"

  • Vue2响应式系统介绍

    Vue2响应式系统介绍

    目录 一.响应式系统要干什么 二.响应式数据 三.保存当前正在执行的函数 四.响应式数据 五.Observer 对象 六.测试 七.总结 前言: 目前工作中大概有 的需求是在用 的技术栈,所谓知其然更要知其所以然,为了更好的使用 .更快的排查问题,最近学习了源码相关的一些知识,虽然网上总结 的很多很多了,不少自己一个,但也不多自己一个,欢迎一起讨论学习,发现问题欢迎指出.40%Vue2VueVue 一.响应式系统要干什么 回到最简单的代码: data = { text: 'hello, worl

  • JS实现表格响应式布局技巧

    JS实现表格响应式布局技巧

    目录 正文 基本结构的实现 使用媒体查询将单个 Table 拆分成多个 借助伪元素极其特性,实现表头信息展示 最后 正文 今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 在屏幕视口较为宽时,表现为一个整体 Table 的样式 而当屏幕视口宽度较小时,原 Table 的每一行数据单独拆分为一个 Table 进行展示 很有意思的一个响应式布局,让信息在小屏幕下得到了一种不错的展示. 那么,仅仅使用 CSS 的话,能否实现这样一个

  • BootStrap table表格插件自适应固定表头(超好用)

    首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b

  • 20分钟成功编写bootstrap响应式页面 就这么简单

    20分钟成功编写bootstrap响应式页面 就这么简单

    最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用了 Bootstrap 后,再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了. 经过学习,我发现自己也具备了分分钟开发出一个高大上的页面的能力.本文将会为大家介绍 Bootstrap,并且带领大家一起实现一个响应式页面. 图 1. 移动优先,适应不同设备 一.安装 最简单的方式是直接在网页中

  • JS实现table表格固定表头且表头随横向滚动而滚动

    JS实现table表格固定表头且表头随横向滚动而滚动

    先看一张效果图 思路: 1.头部用一个table并用一个div包裹着, 表格的具体内容用一个table 2.头部外面的div用positon: relative相对定位 3.获取整个表格的高度 4.获取表格的dom(或者包裹着表格的dom)距离页面顶部的距离 offsetTop 5.滚动的零界点的距离 表格的高度+表格距离页面顶部的距离 如果滚动超过这个 就让头部的top值归0或原封不动 当然还有很多可以优化的地方 我只是展示一个小思路 嘿嘿嘿 题外话 为啥用红色表头 因为显眼哇 哈哈 JS代码

  • vue响应式更新机制及不使用框架实现简单的数据双向绑定问题

    最近看到有些人说vue是双向数据绑定的,有些人说vue是单向数据流的,我认为这两种说法都是错误的,vue是一款具有响应式更新机制的框架,既可以实现单向数据流也可以实现数据的双向绑定. 2 单向数据流与数据双向绑定 单向数据流是指model中的数据发生改变时引起view的改变. 双向数据绑定是指model中的数据发生改变时view的改变,view的改变也会引起model的改变. //这个是单向数据流,改变这个input的value值并不能是data中的text属性发生改变. <input type

  • 微信小程序实现固定表头、列表格组件

    微信小程序实现固定表头、列表格组件

    目录 需求: 功能点 效果图 实现思路 具体代码(react\taro3.0) 具体代码(小程序原生) 总结 需求: 微信小程序实现固定表头固定列表格组件(移动端做点小修改通用) 功能点 排序表格 表头可固定 首列固定(可以优化成可以配置指定列左侧右侧固定) 翻页(上拉加载)监听 效果图 实现思路 开始想用三个ScrollView去实现滚动联动,固定表头.列的话,表格内容滚动表头.列也应该对应滚动,写了demo后发现监听一个ScrollView的位置信息去设置另外两个ScrollView的位置真

随机推荐