前端使用CSS固定表头
* { margin: 0; padding: 0 }
.tableFixedTop { padding: 20px }
.tableFixedTop table { border: 1px solid rgba(221, 221, 221, 1); border-collapse: collapse; width: 100% }
.tableFixedTop table tr, .tableFixedTop table th, .tableFixedTop table td { border: 1px solid rgba(221, 221, 221, 1) }
.tableFixedTop .tableHeader { position: sticky; top: 0 }
.tableFixedTop .tableHeader th { background: rgba(100, 149, 237, 1); color: rgba(255, 255, 255, 1); font-weight: normal; padding: 5px 0 5px 10px; font-size: 12px; text-align: left }
.tableFixedTop .tableBody { margin-top: -1px }
.tableFixedTop .tableBody .textEllipsisA { width: 180px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tableFixedTop .tableBody td { color: rgba(51, 51, 51, 1); font-weight: normal; padding: 5px 0 5px 10px; font-size: 12px; text-align: left }
.tableScroll { padding: 20px }
.tableScroll table { border: 1px solid rgba(221, 221, 221, 1); border-collapse: collapse; width: 100% }
.tableScroll table tr, .tableScroll table th, .tableScroll table td { border: 1px solid rgba(221, 221, 221, 1) }
.tableScroll .tableHeader { position: sticky; top: 0 }
.tableScroll .tableHeader th { background: rgba(100, 149, 237, 1); color: rgba(255, 255, 255, 1); font-weight: normal; padding: 5px 0 5px 10px; font-size: 12px; text-align: left }
.tableScroll .scrollBox { overflow-y: auto; max-height: 200px }
.tableScroll .tableBody { margin-top: -1px }
.tableScroll .tableBody .textEllipsis { max-width: 175px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tableScroll .tableBody td { color: rgba(51, 51, 51, 1); font-weight: normal; padding: 5px 0 5px 10px; font-size: 12px; text-align: left }
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.tableFixedTop {
padding: 20px;
}
.tableFixedTop table {
border: 1px solid #ddd;
border-collapse: collapse;
width: 100%;
}
.tableFixedTop table tr, .tableFixedTop table th, .tableFixedTop table td {
border: 1px solid #ddd;
}
.tableFixedTop .tableHeader {
position: sticky;
top: 0;
}
.tableFixedTop .tableHeader th {
background: cornflowerblue;
color: #fff;
font-weight: normal;
padding: 5px 0 5px 10px;
font-size: 12px;
text-align: left;
}
.tableFixedTop .tableBody {
margin-top: -1px;
}
.tableFixedTop .tableBody .textEllipsisA {
width: 180px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tableFixedTop .tableBody td {
color: #333;
font-weight: normal;
padding: 5px 0 5px 10px;
font-size: 12px;
text-align: left;
}
.tableScroll {
padding: 20px;
}
.tableScroll table {
border: 1px solid #ddd;
border-collapse: collapse;
width: 100%;
}
.tableScroll table tr, .tableScroll table th, .tableScroll table td {
border: 1px solid #ddd;
}
.tableScroll .tableHeader {
position: sticky;
top: 0;
}
.tableScroll .tableHeader th {
background: cornflowerblue;
color: #fff;
font-weight: normal;
padding: 5px 0 5px 10px;
font-size: 12px;
text-align: left;
}
.tableScroll .scrollBox {
overflow-y: auto;
max-height: 200px;
}
.tableScroll .tableBody {
margin-top: -1px;
}
.tableScroll .tableBody .textEllipsis {
max-width: 175px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tableScroll .tableBody td {
color: #333;
font-weight: normal;
padding: 5px 0 5px 10px;
font-size: 12px;
text-align: left;
}
</style>
</head>
<body>
<h2 style="text-align: center;">局部滑动</h2>
<div class="tableScroll">
<table class="tableHeader">
<colgroup>
<col width="100">
<col width="200">
<col width="200">
<col width="200">
<col>
</colgroup>
<tr>
<th>ID</th>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>其他</th>
</tr>
</table>
<div class="scrollBox" style="max-height:400px;">
<table class="tableBody">
<colgroup>
<col width="100">
<col width="200">
<col width="200">
<col width="200">
<col>
</colgroup>
<tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr> <tr>
<td>1</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td>
<div class="textEllipsis">表格信息</div>
</td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
</html>
效果图如下：
前端使用CSS固定表头的更多相关文章
- css 固定表头的表格，和 width:auto, margin:auto等 自计算方法
实现思路: 外层用一个table,里面写好Header,然后里面再写一个table里面写好header.然后自己控制overflow的值使内部的tablemargin-top和外层的行高一致就可以实现 ...
- css固定表头，表单内容可以滑动
<html><head> <meta charset="utf-8"> <title>Table</title&g ...
- css固定表格表头(各浏览器通用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css实现“固定表头带滚动条”的table
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- css控制固定表头，兼容行列合并
项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo. 多浏 ...
- CSS打造固定表头
html代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- 前端html+css+JavaScript 需要掌握的单词
前端html+css+JavaScript 需要掌握的单词 broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php ...
- 原生javascript 固定表头原理与源码
我在工作中需要固定表头这个功能,我不想去找,没意思.于是就写了一个,我写的是angularjs 自定义指令 起了个 "fix-header" ,有人叫 "freeze- ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
随机推荐
- ASP.NET Core - 缓存之内存缓存(下)
话接上篇 [ASP.NET Core - 缓存之内存缓存(上)],所以这里的目录从 2.4 开始. 2.4 MemoryCacheEntryOptions MemoryCacheEntryOption ...
- redhat6安装10g rac过程中的报错
问题描述:redhat 6 来安装oracle10.2.0.1的集群,坑太多了,不建议这样安装,即使安装成功,在升级过程中也会有各种报错.redhat5安装还比较顺利,6就一路坑 1.缺少依赖 lib ...
- vue常用标签(引入vue.js写法)
首先在html中引入vue.js,具体怎么下载可以参考https://blog.csdn.net/lvoelife/article/details/129254906,下载后在html中引入: 一 内 ...
- Node + Express 后台开发 —— 起步
Node + Express 后台开发 -- 起步 前面陆续学习了一下 node.npm.模块,也稍尝试 Express,感觉得换一个思路加快进行. 比如笔者对前端的开发已较熟悉,如果领导给一个内部小 ...
- js-函数记忆
函数记忆: 指将上次的(计算结果)缓存起来,当下次调用时,如果遇到相同的(参数),就直接返回(缓存中的数据). 实现原理:将参数和对应的结果保存在对象中,再次调用时,判断对象 key 是否存在,存在返 ...
- 明解STM32—GPIO应用设计篇之API函数及配置使用技巧
一.前言 本篇开始对STM32的GPIO在实际开发设计中的使用配置和技巧进行探讨,可以先去回顾下之前介绍的GPIO的相关理论基础知识包括基本结构,工作模式和寄存器原理. 了解过STM32的GPIO相关 ...
- Go坑：time.After可能导致的内存泄露问题分析
Go 中 time.After 可能导致的内存泄露 一.Time 包中定时器函数 go v1.20.4 定时函数:NewTicker,NewTimer 和 time.After 介绍 time 包中有 ...
- 2023-01-13：joxit/docker-registry-ui是registry的web界面工具之一。请问部署在k3s中，yaml如何写？
2023-01-13:joxit/docker-registry-ui是registry的web界面工具之一.请问部署在k3s中,yaml如何写? 答案2023-01-13: yaml如下: apiV ...
- 2022-03-25：给定一个长度为 N 的字符串 S，由字符‘a‘和‘b‘组成，空隙由 ‘?‘ 表示。 你的任务是用a字符或b字符替换每个间隙， 替换完成后想让连续出现同一种字符的最长子串尽可能短。
2022-03-25:给定一个长度为 N 的字符串 S,由字符'a'和'b'组成,空隙由 '?' 表示. 你的任务是用a字符或b字符替换每个间隙, 替换完成后想让连续出现同一种字符的最长子串尽可能短. ...
- vue全家桶进阶之路10：修饰符
Vue2 中的修饰符是指在指令后面添加点号(.)和修饰符名称的方式,用于控制指令的行为.修饰符可以分为事件修饰符和属性修饰符两种类型,下面分别介绍它们的作用和使用方法. 事件修饰符 事件修饰符用于控制 ...