纯CSS实现table表头固定(自创备忘)
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可……因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了下,她意思是用js来控制,我则是一直觉得js来计算可能性能上有点不太好,所以我推荐还是css来搞定得了。
先来看别人的经验吧:
-------------------------------------------------------------以下是引用别人的文章-------------------------------------------------------------
最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠。
废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那就是平时我们设计表格的时候,通常都想将表格的头部进行固定,而表格的body部分能够进行滚动的效果,其实这个实现起来很简单的,但是对于初学div+css布局的同学来说,还是有些帮助的。
先体验一下操作感受:
![](https://images2017.cnblogs.com/blog/903661/201708/903661-20170817152846303-1655623686.png)
马上上代码,首先看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的备忘录
版权说明:本文版权归作者和博客园共有,欢迎转载,但必须保留此段声明,且在文章页面中给出原文连接。