[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插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
随机推荐
- python基础-匿名函数和内置函数
匿名函数和内置函数 匿名函数:没有名字,使用一次即被收回,加括号就可以运行的函数. 语法:lambda 参数:返回值 使用方式: 将匿名函数赋值给变量,给匿名函数一个名字,使用这个变量来调用(还不如用 ...
- table的列固定
<body onload="showFix(true,false,initTableId);"> <!doctype html> <html lang ...
- Spring Boot2 系列教程(二十三)理解 Spring Data Jpa
有很多读者留言希望松哥能好好聊聊 Spring Data Jpa! 其实这个话题松哥以前零零散散的介绍过,在我的书里也有介绍过,但是在公众号中还没和大伙聊过,因此本文就和大家来仔细聊聊 Spring ...
- 1005 Spell It Right（20 分）
1005 Spell It Right(20 分) Given a non-negative integer N, your task is to compute the sum of all the ...
- JS如何在不给新空间的情况下给数组去重？
1.先排序,在让相邻元素对比去重 const nums = [3, 1, 1, 5, 2, 3, 4, 3, 5, 5, 6, 4, 6, 6, 6]; Array.prototype.arrayNo ...
- ArcGIS API For Javascript ：如何动态生成 token 加载权限分配的地图服务？
一.需求 项目中我们通常会遇到为外协团队.合作友商提供地图服务的需求,因此对地图服务的权限需要做出分配. 二.现状 主流的办法是用用户和角色来控制,通常使用代理方式和用户名密码的方式来实现. 三.思路 ...
- App稳定性测试Monkey
1.$ adb shell monkey <event-count> <event-count>是随机发送事件数 例:adb shell monk ...
- 移动端viewport模版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 隐藏input输入框的增减按钮
当input 使用了type='number'后,会出现这个增减数值的按钮,如上所示, 解决办法: 1.type='text' ,改为输入字符串,缺点是要做类型转换,而且移动端不会调出纯数字键盘 2. ...
- 扛把子组2018092609-2 选题 Scrum立会报告+燃尽图 04
此作业的要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/8682] 一.小组情况组长:迟俊文组员:宋晓丽 梁梦瑶 韩昊 刘信鹏队名 ...