1. 需求

表格很长，这个时候就希望表格头部不动，而只是表格内容行支持滚动功能。

2. 方法

  • 两张表：一张表(THeader)负责头部字段的显示，另一张表(TBody)负责内容行字段的显示。
  • 两张表都存放在一个div中
  • THeader、TBody分别存放在一个div中
  • 整个div不支持滚动条：overflow: hidden
  • 包住TBody的div支持滚动条：overflow-y: scroll
  • THeader的显示字段比Tbody多一个：用来存放滚动条的位置，宽度设置为17px
  • TBody的高度需要通过JavaScript来计算，可以使用onresize事件动态触发高度的变化

3. 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Table</title>

<style>

    table {

        width: 100%;

        border-collapse: collapse;

        border-radius: 4px;

    }

    th, td {

        text-align: center;

        border: 1px solid green;

    }

    th {

        background-color: rgba(167, 167, 167, 0.5);

        font-size: 15px;

    }

    td {

        font-size: 14px;

    }

    tr:nth-child(even) {

        background-color: #e8f5ed;

    }

    .table-col-1 { width: 30px; }

    .table-col-2 { width: 60px; }

    .table-col-3 { width: 80px; }

    .table-col-4 { width: 22px; }

    /* .table-col-5 { width: 30px; } 这列作为动态宽度值 */

    .table-col-6 { width: 140px; }

    .table-col-7 { width: 220px; }

    .table-col-8 { width: 180px; }

    .table-col-9 { width: 16px; }

    #idTableBody {

        width: 100%;

        overflow-y: scroll;

        height: 120px; /* 如果需要动态的表格内容高度，可以将高度属性的设置转移到onresize事件中实现 */

    }

</style>

</head>

<body>

    <div class="table-details">

        <div id="idTableHeader">

            <table>

                <colgroup>

                    <col class="table-col-1">

                    <col class="table-col-2">

                    <col class="table-col-3">

                    <col class="table-col-4">

                    <col class="table-col-5">

                    <col class="table-col-6">

                    <col class="table-col-7">

                    <col class="table-col-8">

                    <col class="table-col-9">

                </colgroup>

                <tr>

                    <th>1</th>

                    <th>1</th>

                    <th>1</th>

                    <th>1</th>

                    <th>1</th>

                    <th>1</th>

                    <th>1</th>

                    <th>1</th>

                    <th></th>

                </tr>

            </table>

        </div>

        <div id="idTableBody">

            <table>

                <colgroup>

                    <col class="table-col-1">

                    <col class="table-col-2">

                    <col class="table-col-3">

                    <col class="table-col-4">

                    <col class="table-col-5">

                    <col class="table-col-6">

                    <col class="table-col-7">

                    <col class="table-col-8">

                </colgroup>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

                <tr>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                    <td>1</td>

                </tr>

        </div>

    </div>

</body>

</html>

效果：

onresize事件：

function setTBodyHeight() {

    var t = document.getElementById('idTableBody');

    var innerHeight = window.innerHeight;

    t.style.height = (innerHeight - 200) + "px"; // 减去200是去掉一个固定高度

}

window.onload = function () {

    // 监听事件

    window.onresize = setTBodyHeight;

    // 首次加载，由代码触发一次resize事件。

    var ev = document.createEvent("Events");

    ev.initEvent('resize', false, true);

    window.dispatchEvent(ev);

};

[TimLinux] django html如何实现固定表头的更多相关文章

  1. 原生javascript 固定表头原理与源码

    我在工作中需要固定表头这个功能,我不想去找,没意思.于是就写了一个,我写的是angularjs 自定义指令 起了个 "fix-header" ,有人叫  "freeze- ...

  2. 固定表头/锁定前几列的代码参考[JS篇]

    引语:做有难度的事情,才是成长最快的时候.前段时间,接了一个公司的稍微大点的项目,急着赶进度,本人又没有独立带过队,因此,把自己给搞懵逼了.总是没有多余的时间来做自己想做的事,而且,经常把工作带入生活 ...

  3. css 固定表头的表格，和 width:auto, margin:auto等 自计算方法

    实现思路: 外层用一个table,里面写好Header,然后里面再写一个table里面写好header.然后自己控制overflow的值使内部的tablemargin-top和外层的行高一致就可以实现 ...

  4. jQuery 关于ScrollableGridPlugin.js（固定表头）插件的逐步解析

    以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定 ...

  5. css实现“固定表头带滚动条”的table

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. JQuery固定表头插件fixedtableheader源码注释

    在开发XX车站信息系统时,需要将大量数据显示在一个巨大的表格内部,由于表格是一个整体,无法分页,加之数据很多,超出一屏,为了方便用户,决定使用固定表头的插件,经过测试,发现JQuery 插件:fixe ...

  7. 固定表头，单元格td宽度自适应，多内容出现-横向纵向滚动条数据表格的<前世今生>

    固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>     先上图例   & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...

  8. 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐

    在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...

  9. vue表格实现固定表头首列

    前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...

随机推荐

  1. hashMapp

    原文链接:https://www.iteye.com/topic/539465 Hashmap是一种非常常用的.应用广泛的数据类型,最近研究到相关的内容,就正好复习一下.网上关于hashmap的文章很 ...

  2. Javascript模块化开发2——Gruntfile.js详解

    一.grunt模块简介 grunt插件,是一种npm环境下的自动化工具.对于需要反复重复的任务,例如压缩.编译.单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作.grunt模块根据 ...

  3. 使用Jquery获取指定属性的值

    使用Jquery获取指定属性的值 <input type="hidden" value="{$time}" name="time" i ...

  4. nyoj 170-网络的可靠性 (度为1)

    170-网络的可靠性 内存限制:64MB 时间限制:3000ms 特判: No 通过数:15 提交数:21 难度:3 题目描述: A公司是全球依靠的互联网解决方案提供商,也是2010年世博会的高级赞助 ...

  5. ES6学习 let const

    1.前言 发现网易云笔记 单纯的记笔记没什么意思,所以今天来博客园写学习感受了,毕设做了休息时间就来写写新学的知识 哈哈哈 !! 2.ES6 就是JavaScript 语言的下一代标准,2015年6月 ...

  6. 实现websocket 主动消息推送，用laravel+Swoole

    近来有个需求:想实现一个可以主动触发消息推送的功能,这个可以实现向模板消息那个,给予所有成员发送自定义消息,而不需要通过客户端发送消息,服务端上message中监听传送的消息进行做相对于的业务逻辑. ...

  7. 关于Java 值传递深度分析

    首先说观点:java只有值传递没有引用传递 然后再来看看值传递与引用传递两者的定义 值传递(pass by value)是指在调用函数时将实际参数复制一份传递到函数中,这样在函数中如果对参数进行修改, ...

  8. 在阿里云服务器中配置JDK、tomcat、mysql

    阿里云服务器搭建配置 linux命令:参考:https://www.cnblogs.com/itdansan/p/8545187.html cat 文件名: 查看文件内容 ctrl+D : 退出查看 ...

  9. MySQL索引长度限制

    索引 TextField是不支持建立索引的 MySQL对索引字段长度有限制 innodb引擎的每个索引列长度限制为767字节(bytes),所有组成索引列的长度和不能大于3072字节 myisam引擎 ...

  10. 【集合系列】- 深入浅出的分析 Hashtable

    一.摘要 在集合系列的第一章,咱们了解到,Map 的实现类有 HashMap.LinkedHashMap.TreeMap.IdentityHashMap.WeakHashMap.Hashtable.P ...