纯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的备忘录

版权说明：本文版权归作者和博客园共有，欢迎转载，但必须保留此段声明，且在文章页面中给出原文连接。