因为之前约定时候产品没说要表头固定，这次迭代测试突然提出这个需求，而且不知道因为什么未知原因非要这样不可……因为之前用了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的备忘录
版权说明：本文版权归作者和博客园共有，欢迎转载，但必须保留此段声明，且在文章页面中给出原文连接。