html 把table固定住,html Table实现表头固定
合同号签约客户发布客户合同状态选定条件的发布周期额度
看看css
*{
padding:0;
margin:0;
}
th{
border:1px solid #e6e6e6;
line-height: 5vh;
color:#666666;
font-size: 16px;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
padding:5px;
border:1px solid #e6e6e6;
font-size: 14px;
}
.table-head{padding-right:17px;background-color:rgb(207, 231, 179);color:#000;height:5vh;}
.table-body{width:100%; height:94vh;overflow-y:scroll;}
.table-head table,.table-body table{width:100%;}
.table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
.table-body table tr:hover {
background-color:rgb(240, 249, 228);
transition: .2s;
}
其实关键之处在于
1、使用了colgroup标签,来对上下两个表格的列宽进行了定义,让他们保持一致。
2、上边的div .table-head添加了样式padding-right:17px,这个宽度是为了保证跟下边的div .table-body的滚动条保持一致,同时下边的表格.table-body添加了样式overflow-y:scroll;
只要保证上述两点的话,你也可以做出固定表头的表格来,同时不会发生上下的列不对齐的问题,屡试不爽!
html 把table固定住,html Table实现表头固定相关推荐
- 完美解决html表格表头固定存在的问题
完美解决html表格表头固定存在的问题 当表格数据较多出现滚动条时,很多地方都有固定表头的需求.在网上查找资料,发现了一个比较简洁的方法. 代码如下: 1.css样式: th{backgroun ...
- uniapp 微信小程序 ui-table 表头固定,可缩放,实现
效果图 表头固定,可缩放效果 前言 用到的组件: 使用uniapp内置组件 movable-view和movable-area实现表格缩放 使用uni-table 实现表格渲染(自带多选,没有头固定功 ...
- alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案
一.前言 ElementUI.iView都以相同的方式提供了表格组件表头固定的方法,即设置组件的height属性.表头固定很重要,就在于当表格数据项很多时,滚动条出现在表格组件内,而不是出现在表格组件 ...
- JQuery实现的Table表头固定展示效果
在线演示1 在线演示2 在线演示3 本地下载 大家可能经常需要展示数据或者报表,表头如果滚动上去后,查看数据的类别和字段是个麻烦事情,在这里我们推荐来自tympanus的一个JS实现的 table表头 ...
- 纯CSS实现table表头固定(自创备忘)
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
- Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定 前言 一.表格数据 二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结 前言 大家一定使用过很多UI,UI都 ...
- js、css 实现table表头固定
1. js实现(个人项目用过,完全js实现) html: <div class='table-cont' id='table-cont'><!--看这里--> <tab ...
- html table 实现表头固定
代码如下 <!DOCTYPE html> <html> <head><meta charset='utf-8'><title>表頭固定< ...
- html <table> 表格 表头固定 内容滚动 代码拿去就能用
纯 html.css代码写的 table 表格 先来看下pc端的效果图 移动端的效果图,前面两张是静态图,第三张是gif动态图 (像素失真了 •︿• ) 公司的移动端项目,用的是react,页面需求是 ...
最新文章
- boos里的AHCI RAID_安徒恩Raid删除,安徒恩讨伐战上线,详细攻略快速看,成为新的摸金圣地...
- 帆软决策报表嵌入html,在决策报表中使用网页框控件
- EAT/IAT Hook
- vue ---- ref
- 咱也过个双 11 !Flink Forward Asia 培训门票买一赠一!
- 红帽全年总营收24亿美元,同比增长18%
- WinHttp c++ 介绍及应用
- uniapp ios 沙盒测试支付(苹果支付)
- 半小时漫画股票实战法观看记录,观看更新
- java fop_java – 未找到类FOP
- 【C++】利用DFS求解水洼数目问题
- 刷脸支付就是会员为大商户管理与运营提供帮助
- Linux系统盘满了,如何解决。
- 卡塔尔世界杯除了没有中国队以外,都是中国元素!
- 希腊字母的读法[转]
- 【理论课之配饰设计】色彩与视觉的原理
- Django 学习记录
- EAS BOS 单据打开新增界面设置字段默认值
- 数据结构c语言版二叉树的顺序存储表示,数据结构(十一) -- C语言版 -- 树 - 二叉树基本概念...
- 图形化开发(五)022-Three.js之材质——受光影响-MeshLambertMaterial 兰伯特材质 MeshPhongMaterial 高光材质
热门文章
- 计算机计算性能,计算机计算能力的关键特点
- 快过年了,Python实现12306查票以及自动购票....
- 科林明伦杯”哈尔滨理工大学第十届程序设计竞赛B(减成1)
- 重头系统的学习,不会咱就学!2014.6.18
- 神经网络分类算法是什么,神经网络分类算法简介
- 全球域名后缀注册量排行榜!
- java结构体构建学生 学号_(1)定义一个结构体数组,存放10个学生的学号,姓名,三门课的成绩; 急求...
- 股票大作手回忆录(读书笔记)
- [SHOI2008] 小约翰的游戏
- 数学建模之灰色关联分析