[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插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
随机推荐
- vue登录功能和将商品添加至购物车实现
2.1: 学子商城--用户登录 用户登录商城用户操作行为,操作用户输入用户名和密码 点击登录按钮,一种情况登录成功 一种情况登录失败 "用户名或密码有误请检查" 2.2:如何实现 ...
- PHP 高级面试115题汇总(含答案)
1.给你四个坐标点,判断它们能不能组成一个矩形,如判断 ([0,0],[0,1],[1,1],[1,0]) 能组成一个矩形.勾股定理,矩形是对角线相等的四边形.只要任意三点不在一条直线上,任选一点,求 ...
- spark thriftserver
spark可以作为一个分布式的查询引擎,用户通过JDBC的形式无需写任何代码,写写sql就可以实现查询啦,spark thriftserver的实现也是相当于hiveserver2的方式,并且在测试时 ...
- App稳定性测试Monkey
1.$ adb shell monkey <event-count> <event-count>是随机发送事件数 例:adb shell monk ...
- opencv HSV找颜色，找轮廓用最小旋转矩形框出
#include <opencv2/opencv.hpp> #include<iostream> #include<string> using namespace ...
- C#变量---xdd
cshape(c#)学习笔记 1. string str1=Console.ReadLine();//键盘输入的默认为字符串 2. Console.WriteLine('你的成绩是'+a+'分'); ...
- 23种GoF设计模式概述
23种GoF设计模式概述 在前面,我们对 GoF 的 23 种设计模式进行了分类,这里先对各个设计模式的功能进行简要介绍,以便有个大概了解.后面的章节再进行详细介绍. 创建型模式 关注于怎么创建对象的 ...
- 在IOS中实现新浪微博OAuth认证
主要讲解在ios中的认证流程,至于如何得到新浪用户授权账号,地址,这些可以见视频0506. 1.用UIWebView访问新浪授权页面https://api.weibo.com/oauth2/autho ...
- jqery 动态添加元素 绑定事件
jQuery动态添加元素: var url = "...";//服务地址 $.ajax({ type: 'post', url: url, data:{fireId:fireId} ...
- Floyd && Dijkstra +邻接表 +链式前向星（真题讲解来源：城市路）
1381:城市路(Dijkstra) 时间限制: 1000 ms 内存限制: 65536 KB提交数: 4066 通过数: 1163 [题目描述] 罗老师被邀请参加一个舞会,是 ...