前端使用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 ...
随机推荐
- handler+looper+messagequeue源码解析
https://www.jianshu.com/p/b4d745c7ff7ahandler机制源码1.handler机制的作用在多线程的场景中,将子线程中需要更新UI的操作信息传递到UI主线程.多个线 ...
- 为什么C++语言性能优越？
面试时被问到这个问题,发现自己一直以来理所当然的认为C++快,却没有具体分析原因.下面简单总结一下为什么快. 当我们编写程序时,我们需要将程序转换为计算机可以理解的机器语言.不同的语言有不同的执行机制 ...
- vue中父组件给子组件传值的方法
顺序............................................. -------------列表组件,注册组件.调用使用组件----------------- 1,子组件 ...
- Python 创建数字列表
创建数字列表 用于存储数字集合,高效地处理数字列表 使用函数range() range(value1,value2),从指定的第一个值开始数,到达指定的第二个值后停止,输出不包含第二个值 使用rang ...
- 音视频八股文（2）--ffmpeg常见命令（1）
官方文档: https://www.ffmpeg.org/ffplay-all.html https://www.ffmpeg.org/ffmpeg-all.html 01-Windows FFMPE ...
- 2020-09-26：请问rust中的&和c++中的&有哪些区别？
福哥答案2020-09-26:#福大大架构师每日一题# 变量定义:c++是别名.rust是指针.取地址和按位与,c++和rust是相同的. c++测试代码如下: #include <iostre ...
- 2020-10-29：使用redis实现分布式限流组件，要求高并发场景同一IP一分钟内只能访问100次，超过限制返回异常，写出实现思路或伪代码均可。
福哥答案2020-10-29: 简单回答:固定窗口:string.key存ip,value存次数.滑动窗口:list.key存ip,value=list,存每次访问的时间. 中级回答:固定窗口:用re ...
- 2022-02-09：k8s安装redis，yaml如何写？
2022-02-09:k8s安装redis,yaml如何写? 答案2022-02-29: apiVersion: apps/v1 kind: Deployment metadata: labels: ...
- pages.json 文件：pages 节点
pages uni-app 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下: 属性 类型 默认值 描述 path String 配 ...
- structed streaming 触发器trigger
structed streaming的执行批次,较spark streaming有所改变.更加灵活.总结下来,可大白话地分为三类: 1尽可能快的执行,不定时间 2按固定间隔时间执行 3仅执行一次 详情 ...