前端使用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 ...
随机推荐
- 帝国cms7.5和7.2 搜素模板支持 php和灵动标签以及不起作用
帝国CMS搜索模板不支持动态标签调用,从7.0到7.2再到刚发布的7.5,帝国官方团队始终没解决这个问题,这很不方便,但是帝国的强大可以让我们忽略这个问题,今天老威就把这个bug的解决方法说一下. 第 ...
- Unix shell开头的#!
1:位于脚本文件最开始 2:#!告诉系统内核应有哪个shell来执行所指定的shell脚本. 3:如#! /bin/bash ,#!与shell文件名之间可以有空格,没有限定. 4:指定的shell可 ...
- 我的第一个项目(十二) :分数和生命值的更新(后端增删查改的"改")
好家伙,写后端,这多是一件美逝. 关于这个项目的代码前面的博客有写 我的第一个独立项目 - 随笔分类 - 养肥胖虎 - 博客园 (cnblogs.com) 现在,我们登陆进去了,我开始和敌人战斗,诶 ...
- （原创第一篇，踩坑无数得来的，对Ai自动化测试框架很有帮助）appium自动化测试时遇到不能使用element定位的在用坐标点击之后获取焦点如何输入文本
现在开发的前端界面使用vue或者更牛逼技术,导致使用appium或者uiautomator2做自动化测试时不能识别到元素,无法使用传统的id,name或者xpath,这时我们需要使用坐标点击文本框.有 ...
- 高精度地形DEM数据下载（NASA数据 12.5米分辨率）
本文介绍从NASA阿拉斯加卫星设备处网站下载高精度DEM数据,下载的数据精度是12.5米分辨率. 目前国内大部分可以下载的dem数据都是30米或90米分辨率的,对于更高精度的数据要不就是需要付费下载, ...
- Pwn系列之Protostar靶场 Stack1题解
(gdb) disasse main Dump of assembler code for function main: 0x08048464 <main+0>: push ebp 0x0 ...
- Hibernate 基本操作、懒加载以及缓存
前言 上一篇咱们介绍了 Hibernate 以及写了一个 Hibernate 的工具类,快速入门体验了一波 Hibernate 的使用,我们只需通过 Session 对象就能实现数据库的操作了. 现在 ...
- 2021-10-18：乘积最大子数组。给你一个整数数组 nums ，请你找出数组中乘积最大的连续子数组（该子数组中至少包含一个数字），并返回该子数组所对应的乘积。力扣152。
2021-10-18:乘积最大子数组.给你一个整数数组 nums ,请你找出数组中乘积最大的连续子数组(该子数组中至少包含一个数字),并返回该子数组所对应的乘积.力扣152. 福大大 答案2021-1 ...
- vue全家桶进阶之路25：Vue2的停维通知
Vue 2 的技术支持会持续多久?从官方发文来看,Vue 2.7 是当前.同时也是最后一个 Vue 2.x 的次级版本更新.Vue 2.7 会以其发布日期,即 2022 年 7 月 1 日开始计算,提 ...
- Windows server 2012 r2 激活方法
slmgr /ipk W3GGN-FT8W3-Y4M27-J84CP-Q3VJ9 slmgr /skms kms.03k.org slmgr /ato