[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插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
随机推荐
- 使用Bootstrap制作简单的旅游主页
页面效果 代码: 需要导入bootstrapt文件,解压至项目中. 下载地址:https://v3.bootcss.com/getting-started/#download <!DOCTYPE ...
- java多线程回顾3：线程安全
1.线程安全问题 关于线程安全问题,有一个经典案例:银行取钱问题. 假设有一个账户,有两个线程从账户里取钱,如果余额大于取钱金额,则取钱成功,反之则失败. 下面来看下线程不安全的程序会出什么问题. 账 ...
- [RAM] FPGA的学习笔记——RAM
1.RAM——随机存取存储器, 分为SRAM和DRAM. SRAM:存和取得速度快,操作简单.然而,成本高,很难做到很大.FPGA的片内存储器,就是一种SRAM,用来存放程序,以及程序执行过程中,产生 ...
- 从0开始学前端（笔记备份）----HTML部分 Day1 HTML标签
- 24 道 shell 脚本面试题
想要成为中高级phper, shell 脚本是需要掌握的,它有助于你在工作环境中自动完成很多任务. 如下是一些面试过程中,经常会遇到的 shell 脚本面试问题及解答: Q:1 Shell脚本是什么. ...
- cognos服务器性能测试诊断分析优化过程记录
前段时间客户方一个系统上线后出现性能问题,就是查询报表的时候出现宕机现象,应项目组要求过去帮忙测试优化问题. 该项目的架构相对比较复杂,登录后要先进行认证服务器认证用户然后登录到应用系统A,在跳转到 ...
- 浅谈.NET中的反射
一.概述 1.通过反射可以提供类型信息,从而使得我们开发人员在运行时能够利用这些信息构造和使用对象 2.反射机制允许程序在执行过程中动态地添加各种功能 二.运行时类型标识 1.运行时类型标志(RTT ...
- 【NHOI2018】字符串变换
[题目描述] 给你一个全部由大小写字母组成的字符串,你每次可以将一个小写字母变换成对应的大写字母,或把一个大写字母变换成对应的小写字母.请问:至少要进行多少次变换才可以使整个字符串全部由大写字母或全部 ...
- 【日常错误】Could not initialize class org.hibernate.validator.internal.engine.ConfigurationImpl
最近在用spring-boot编写一个Lucene项目,中间用到了redis,引用了spring-boot-starter-data-redis,在eclipse中用外部Tomcat启动项目一切正常, ...
- MySql简单的增删改查语句 js
最近在项目中需要连接数据库,做增删改查的功能,sql语句整理做了以下记录(基于NodeJs,注:data为你的真实数据): (一)新增插入表中数据: sql: 'insert into work(表名 ...