[TimLinux] django html如何实现固定表头
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如何实现固定表头的更多相关文章
- 原生javascript 固定表头原理与源码
我在工作中需要固定表头这个功能,我不想去找,没意思.于是就写了一个,我写的是angularjs 自定义指令 起了个 "fix-header" ,有人叫 "freeze- ...
- 固定表头/锁定前几列的代码参考[JS篇]
引语:做有难度的事情,才是成长最快的时候.前段时间,接了一个公司的稍微大点的项目,急着赶进度,本人又没有独立带过队,因此,把自己给搞懵逼了.总是没有多余的时间来做自己想做的事,而且,经常把工作带入生活 ...
- css 固定表头的表格，和 width:auto, margin:auto等 自计算方法
实现思路: 外层用一个table,里面写好Header,然后里面再写一个table里面写好header.然后自己控制overflow的值使内部的tablemargin-top和外层的行高一致就可以实现 ...
- jQuery 关于ScrollableGridPlugin.js（固定表头）插件的逐步解析
以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定 ...
- css实现“固定表头带滚动条”的table
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- JQuery固定表头插件fixedtableheader源码注释
在开发XX车站信息系统时,需要将大量数据显示在一个巨大的表格内部,由于表格是一个整体,无法分页,加之数据很多,超出一屏,为了方便用户,决定使用固定表头的插件,经过测试,发现JQuery 插件:fixe ...
- 固定表头，单元格td宽度自适应，多内容出现-横向纵向滚动条数据表格的<前世今生>
固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生> 先上图例 & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...
- 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐
在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...
- vue表格实现固定表头首列
前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
随机推荐
- java架构之路（MQ专题）kafka集群配置和简单使用
前面我们说了RabbitMQ和RocketMQ的安装和简单的使用,这次我们说一下Kafka的安装配置,后面我会用几个真实案例来说一下MQ的真实使用场景.天冷了,不愿意伸手,最近没怎么写博客了,还请见谅 ...
- PHP 面试官问：你说说Redis的几个过期策略？
在使用redis时,一般会设置一个过期时间,当然也有不设置过期时间的,也就是永久不过期.当设置了过期时间,redis是如何判断是否过期,以及根据什么策略来进行删除的. 设置过期时间 expire ke ...
- CMake 常用函数记录
1.cmake_minunum_required(VERSION 2.6) #cmake 最低要求版本号 2.PROJECT(projectname [CXX] [C] [Java]) #这个指令隐式 ...
- 64位手机部署centos
在64位处理器的手机上部署centos会有下面的困难. 1. 没有现成的aarch64的rootfs. 2. termux没有rpm2cpio进行部署. 3. armv8*不会被centos识别为aa ...
- 反汇编分析NSString，你印象中的NSString是这样吗
我们先来定义三个NSString -(void) testNSString { NSString* a = @"abc"; NSString* b = [NSString stri ...
- Java IO入门
目录 一. 数据源(流) 二. 数据传输 三. 总结 我们从两个方面来理解Java IO,数据源(流).数据传输,即IO的核心就是对数据源产生的数据进行读写并高效传输的过程. 一. 数据源(流) 数据 ...
- for循环的更多写法
在看设计模式这本书,遇到一个令人疑惑的for循环语句 for (var i = 0, type;type = ['String', 'Array', 'Number'][i++]) { 代码块 } 比 ...
- HashMap的源码学习以及性能分析
HashMap的源码学习以及性能分析 一).Map接口的实现类 HashTable.HashMap.LinkedHashMap.TreeMap 二).HashMap和HashTable的区别 1).H ...
- Redis为什么是单线程、及高并发快的3大原因详解
Redis的高并发和快速原因 1.redis是基于内存的,内存的读写速度非常快: 2.redis是单线程的,省去了很多上下文切换线程的时间: 3.redis使用多路复用技术,可以处理并发的连接.非阻塞 ...
- 从面试官甄别项目经验的角度，说说如何在简历中写项目经验（java后端方向）
在大多的JD(职位介绍)里,会写明该职位需要xx时间的相关经验,换句话说就是需要在简历中看到一定年限的相关商业项目经验,否则估计连面试的机会都没. 在本文里,不讨论这种门槛是否合理,而会以Java相关 ...