因為之前約定時候產品沒說要表頭固定，這次迭代測試突然提出這個需求，而且不知道因為什么未知原因非要這樣不可……因為之前用了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的備忘錄
版權說明：本文版權歸作者和博客園共有，歡迎轉載，但必須保留此段聲明，且在文章頁面中給出原文連接。