前端使用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 ...
随机推荐
- 脚本：Oracle巡检html版
做一个日常巡检oracle数据库的脚本,生成一个html版本,简介方便查看 check_db.sql 1.数据库情况 2.数据文件及表空间情况 3.数据库性能问题 4.加入邮件,定期发送到邮箱 发件语 ...
- 极简cfs公平调度算法
1. 说明 1> linux内核关于task调度这块是比较复杂的,流程也比较长,要从源码一一讲清楚很容易看晕 2> 本篇文章主要是讲清楚cfs公平调度算法如何将task在时钟中断驱动下切换 ...
- mysql 清空数据表id 重1开始 帝国cms清空数据表id 重1开始
alter table phome_ecms_news auto_increment=1; alter table phome_ecms_news_check auto_increment=1; al ...
- CF1738EBalance Addicts
CF1738EBalance Addicts 原题: CF1738EBalance Addicts 目录 CF1738EBalance Addicts 题目大意 做法 思路 注意 code 题目大意 ...
- 机器学习（七）：梯度下降解决分类问题——perceptron感知机算法与SVM支持向量机算法进行二维点分类
实验2 感知机算法与支持向量机算法 一.预备知识 1.感知机算法 二.实验目的 掌握感知机算法的原理及设计: 掌握利用感知机算法解决分类问题. 三.实验内容 设计感知机算法求解, 设计SVM算法求解( ...
- 【Visual Leak Detector】核心源码剖析（VLD 1.0）
说明 使用 VLD 内存泄漏检测工具辅助开发时整理的学习笔记.本篇对 VLD 1.0 源码做内存泄漏检测的思路进行剖析.同系列文章目录可见 <内存泄漏检测工具>目录 目录 说明 1. 源码 ...
- [双目视差] 立体校正源码分析(opencv)
文章目录 [双目视差] 立体校正源码分析(opencv) 一.源码解析 二.源码中的方法 [双目视差] 立体校正源码分析(opencv) 一.源码解析 立体校正:把实际中非共面行对准的两幅图像,校正成 ...
- C# 实现窗体启动时隐藏
在某些时候需要实现一个界面的后台程序,程序自动运行,但起初不显示窗体,在满足触发条件时显示,此时需要在运行程序时先自动隐藏窗体. 修改窗体对应的Program.cs: using System; us ...
- 2022-01-30：最小好进制。 对于给定的整数 n, 如果n的k（k＞=2）进制数的所有数位全为1，则称 k（k＞=2）是 n 的一个好进制。 以字符串的形式给出 n, 以字符串的形式返回 n 的
2022-01-30:最小好进制. 对于给定的整数 n, 如果n的k(k>=2)进制数的所有数位全为1,则称 k(k>=2)是 n 的一个好进制. 以字符串的形式给出 n, 以字符串的形式 ...
- pycharm eslint should be on a new line
修改前: "vue/max-attributes-per-line": [2, { "singleline": 10, "multiline" ...