纯CSS实现table表头固定(自创备忘)
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可……因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了下,她意思是用js来控制,我则是一直觉得js来计算可能性能上有点不太好,所以我推荐还是css来搞定得了。
先来看别人的经验吧:
-------------------------------------------------------------以下是引用别人的文章-------------------------------------------------------------
最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠。
废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那就是平时我们设计表格的时候,通常都想将表格的头部进行固定,而表格的body部分能够进行滚动的效果,其实这个实现起来很简单的,但是对于初学div+css布局的同学来说,还是有些帮助的。
先体验一下操作感受:
马上上代码,首先看html
1 <div style="width: 800px;">2 <div class="table-head">3 <table>4 <colgroup>5 <col style="width: 80px;" />6 <col />7 </colgroup>8 <thead>9 <tr><th>序号</th><th>内容</th></tr> 10 </thead> 11 </table> 12 </div> 13 <div class="table-body"> 14 <table> 15 <colgroup><col style="width: 80px;" /><col /></colgroup> 16 <tbody> 17 <tr><td>1</td><td>我只是用来测试的</td></tr> 18 <tr><td>2</td><td>我只是用来测试的</td></tr> 19 <tr><td>3</td><td>我只是用来测试的</td></tr> 20 <tr><td>4</td><td>我只是用来测试的</td></tr> 21 <tr><td>5</td><td>我只是用来测试的</td></tr> 22 <tr><td>6</td><td>我只是用来测试的</td></tr> 23 <tr><td>7</td><td>我只是用来测试的</td></tr> 24 <tr><td>8</td><td>我只是用来测试的</td></tr> 25 <tr><td>9</td><td>我只是用来测试的</td></tr> 26 <tr><td>10</td><td>我只是用来测试的</td></tr> 27 <tr><td>11</td><td>我只是用来测试的</td></tr> 28 <tr><td>12</td><td>我只是用来测试的</td></tr> 29 <tr><td>13</td><td>我只是用来测试的</td></tr> 30 <tr><td>14</td><td>我只是用来测试的</td></tr> 31 <tr><td>15</td><td>我只是用来测试的</td></tr> 32 </tbody> 33 </table> 34 </div> 35 </div>
再看css如下
1 .table-head{padding-right:17px;background-color:#999;color:#000;} 2 .table-body{width:100%; height:300px;overflow-y:scroll;} 3 .table-head table,.table-body table{width:100%;} 4 .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
其实关键之处在于
1、使用了colgroup标签,来对上下两个表格的列宽进行了定义,让他们保持一致。
2、上边的div .table-head添加了样式padding-right:17px,这个宽度是为了保证跟下边的div .table-body的滚动条保持一致,同时下边的表格.table-body添加了样式overflow-y:scroll;
只要保证上述两点的话,你也可以做出固定表头的表格来,同时不会发生上下的列不对齐的问题,屡试不爽!
文章作者:文飞
文章出处:文飞的博客
版权说明:本文版权归作者和博客园共有,欢迎转载,但必须保留此段声明,且在文章页面中给出原文连接。
-------------------------------------------------------------以上是引用别人的文章-------------------------------------------------------------
BUT,估计是我打开方式不对还是咋回事,就是成功不了,各种表头和表身的border对不齐,无奈的很。周六大晚上23点半,凌乱中我乱试了自己想到的方法:
<div class="table-responsive article_tab" id="scrollTable"><div class="dbTable" style="padding-right: 17px;"><table class="table table-bordered theadUnScoll"><colgroup><col width="4%"><col width="5%"><col width="40%"><col width="10%"><col width="10%"><col width="15%"><col></colgroup><thead><tr><th class="tableHeadTh"><div class="checkbox my_checkbox"><label class="checkbox-inline"><!--全选--><input type="checkbox" ng-model="select_all" ng-change="selectAll()"></label></div></th><th class="tableHeadTh">编号</th><th class="tableHeadTh">文章标题</th><th class="tableHeadTh">文章类型</th><th class="tableHeadTh">文章状态</th><th class="tableHeadTh">录入时间</th><th class="tableHeadTh noRborder">操作</th><th class="noLborder"></th></tr></thead></table></div><div class="divTbody dbTable"><table class="tbodyUnScoll"><colgroup><col width="4%"><col width="5%"><col width="40%"><col width="10%"><col width="10%"><col width="15%"><col></colgroup><tbody><tr ng-repeat="text in textList | orderBy:'createTime':true"><td><div class="checkbox my_checkbox"><label class="checkbox-inline"><!--勾选--><input type="checkbox" ng-model="text.checked" ng-change="selectOne()"></label></div></td><td>{{text.id}}</td><td>{{text.title}}</td><td ng-if="text.type == 2">自定义链接</td><td ng-if="text.type == 1">外部链接</td><td ng-if="text.publishStatus == 1">已发布</td><td ng-if="text.publishStatus == 2">定时发布</td><td>{{text.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</td><td class="linkWrap"><a ng-href="{{text.htmlUrl || text.linkUrl}}" target="view_window">查看</a><a ui-sref="dashboard.article-Edit({articleId:text.id})" ng-if="showArticleModify" ng-class="{Gray:disArticleModify}">编辑</a><a data-toggle="modal" data-target="#myModal-delete" role="button" ng-click="trigger_del_text(text.id)" ng-if="showArticleRemove" ng-class="{Gray:disArticleRemove}">删除</a><a ui-sref="dashboard.article-reviews({articleId:text.id})" ng-if="showCommentGet" ng-class="{Gray:disCommentGet}">评论管理</a></td></tr></tbody></table></div> </div>
table.theadUnScoll {width: 100%;margin-bottom: 0px; }table.theadUnScoll th{font-size: 12px;color:#444444;background: #F5F5F5; }.divTbody{position: absolute;top: 35px;width: 100%;//height: 100px;bottom: 0px;overflow-y: scroll; }table.tbodyUnScoll {width:100%;border: 1px solid #ddd;border-right:#B74;color:#666666;background: #fff; }table.tbodyUnScoll td{border:1px solid #ddd;padding: 8px; }table.theadUnScoll th.noRborder{border-right: 0px; } table.theadUnScoll th.noLborder{border-left: 0px; }
这个方法竟然成!功!了!!!
上图:
好了,我要总结一下,尽管这个方法我是成功了,但是可能别的情况下不知道怎么直接切入这种操作。要点就是:
1、表头和表身首先必须由<div>包裹且表头的<div>一定要有padding-right: 17px;(这个是重点一);
2、如果有7个纵列,那么<colgroup>中的<col>也要有7个且最后一个<col>不要给规定宽度(这个是重点二);
3、如果有7个纵列,表头的table中的<th>要多加一个空的<th>;下面的表身则不用加(这个是重点三);也可能是样式布局的关系,导致我不加这个空的<th>总是会错位。
综上,这个表格不用强行规定宽度,可以自适应窗口大小;缺点是如果窗口太小了,很可能把有些表头的字搞换行导致纵列的border错位。目前能想到就这么多,暂且记下,也希望帮助到遇到此问题的朋友!
文章作者:Edison
文章出处:Edison的备忘录
版权说明:本文版权归作者和博客园共有,欢迎转载,但必须保留此段声明,且在文章页面中给出原文连接。
转载于:https://www.cnblogs.com/edison1412/p/7382393.html
纯CSS实现table表头固定(自创备忘)相关推荐
- 【css】纯css实现table表格固定表头,表内容滚动
今天在写公司项目的时候,遇到了一个比较xx的问题,现公司的项目使用的是 vue2.0 和 element-ui 搭建的. 那么提到 element-ui 大家都知道,他最实用的一个组件就是表格了,简直 ...
- js、css 实现table表头固定
1. js实现(个人项目用过,完全js实现) html: <div class='table-cont' id='table-cont'><!--看这里--> <tab ...
- html table表头说明,HTML table表头固定
HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: table tbody { display: block; height: 200px; overflo ...
- HTML table表头固定
实现表格表头的固定,采用纯css的方式 具体如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="C ...
- html表格展开格式,4款简单常见的纯CSS表格(table)样式
本文介绍4款简单常见的纯CSS表格(table)样式. 1.默认表格(default table) 添加pure-table类样式化表格, 此类向表元素添加填充(padding)和边框(borders ...
- table表头和首列的表格固定-JQuery、js实现的Table表头固定
这个是最简单的方法,基于jQuery的解决方案,引入一个两个js就可以解决,当然也有使用css, position: sticky,这个我下一章节会讲它的优缺点,当然为了凸显jQuery的优点, 我就 ...
- table 表头固定
一.table 表头固定说明.我们将表头和表内容分成两个表格就可以解决该问题. 二.代码. css代码:里面定死的宽高只是为啦方便看效果,实际中需要使用js计算出来. * {box-sizing: b ...
- html5手机表头设置,html Table 表头固定的实现
本文介绍了html table 表头固定的实现,分享给大家,具体如下: 合同号签约客户发布客户合同状态选定条件的发布周期额度 看看css *{ padding:0; margin:0; } th{ b ...
- JQuery实现的Table表头固定展示效果
在线演示1 在线演示2 在线演示3 本地下载 大家可能经常需要展示数据或者报表,表头如果滚动上去后,查看数据的类别和字段是个麻烦事情,在这里我们推荐来自tympanus的一个JS实现的 table表头 ...
最新文章
- linux rcs文件中的ip,linux学习笔记之diff和patch命令
- BufferedReader和BufferedWriter读写文件
- 数据结构~~~线性表复习(栈的应用)
- C#实现二叉树--二叉链表结构
- 三年租男友回家竟花了10万......
- 光功率 博科交换机_如何将交换机40G QSFP+与10G SFP+端口互连?
- python logger_牛逼!python中的logging模块居然这么好用!
- 选中一行的快捷键_常用文字编辑快捷键,学会之后,天天可以提前下班
- 敏感词库快速添加到mysql数据库,并在页面使用方法过滤敏感词
- Web 方向学习路线
- 基于VGG16主干模型的segnet语义分割详解及实例
- 质量评估指标:PSNR(Peak signal-to-noise ratio 峰值信噪比)
- 模型评估(误差平方和(SSE The sum of squares due to error))
- 2021年物联网竞赛-A卷-ZigBee【CC2530】
- winform键盘操控之组合键
- 小姜的模拟学习日记_spectre使用
- vue 活动倒计时组件
- C++11介绍之vector::push_back和vector::emplace_back区别
- 计算机毕业设计之java+ssm基于web的医院门诊互联电子病历管理信息系统
- (二)linux下ping不通的解决方法
热门文章
- matlab 高级函数
- JDK+SDK 环境变量记录
- __mmc_claim_host
- “Runtime Error”不产生dump文件的解决办法
- SQL SERVER的字段类型说明
- 小森林顺序_这篇微推价值过亿!仁恒公园世纪二期选房顺序“摇号”,1:7!
- linux下如何安装自带编译器的codeblocks,codeblocks安装(自带gcc编译器)
- Linux策略路由--原理、配置和应用
- (21)Verilog HDL结构:task语句
- php声明js变量类型,js中变量是什么以及有哪些类型