css3实现固定表格头部而无需设置单元格td的宽度
发布在css研究2017年3月1日view:22741HTML5CSS
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

本博客持续修改与更新中,点击这里查看最新的内容

背景

最近小弟在工作都是做后台系统,一堆的表格,各种各样的。然后需求上要有固定的表头的表格,如下图所示

table-thead-fixed

在网上查询固定表头的实现方式为:

  • thead 设置为 fixed
  • 拆分表格为两个表格 thead一个,tbody一个

​然而上面的实现上有个条件是*要提前设置单元格的大小 *, 如果没有设置对的会就是下面这个样子(下面是其它的博主的例子图, 我盗用下 :smirk: )

​:expressionless::expressionless::expressionless::expressionless: 我可不要固定单元格宽度,固定的宽度怎么做组作啊。。。

在css3中的transform不会改变原来元素的大小位置,相当于是复制了份出来,然后transform的计算速也够快(这里婊一下absolute加left ,top,经常慢半拍)。用这个做这个功能非常合适,还要加点js用于监听滚轮。

实现方式

运行我写的 在线例子 打不开,请使用科学上网*:smirk::smirk::smirk:

下面贴下代码

js:

// Code goes here
'use strict'
window.onload = function(){
  var tableCont = document.querySelector('#table-cont')
  /**
   * scroll handle
   * @param {event} e -- scroll event
   */
  function scrollHandle (e){
    console.log(this)
    var scrollTop = this.scrollTop;
    this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
  }

  tableCont.addEventListener('scroll',scrollHandle)
}

css:

/* Styles go here */

.table-cont{
  /**make table can scroll**/
  max-height: 200px;
  overflow: auto;
  /** add some style**/
  /*padding: 2px;*/
  background: #ddd;
  margin: 20px 10px;
  box-shadow: 0 0 1px 3px #ddd;
}
thead{
  background-color: #ddd;
}

html:

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
  <div class='table-cont' id='table-cont'><!--看这里-->

   <table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>
  </body>

</html>

table-thead-fixed

搞定,美滋滋:thumbsup::thumbsup::thumbsup:

评论
发表评论
4个月前

大侠,我这个用了您的方法,还是不能固定呀,而且貌似你这个给的演示的例子表头也不是固定的,这是咋回事呢

4个月前

可以用box-shadow 将就一下

7个月前

这个方法实现了表头部固定,但是头部怎么在下层呗表体覆盖了

1年前

这个transform后表头的border没了,这个怎么解决?

WRITTEN BY
矮子高
................................
TA的新浪微博
PUBLISHED IN
css研究

很喜欢这个前端论坛~所以在自己博客的每一篇原创文章都会在这边跟大家分享一下,暂定就这么多,纯粹的爱好者。

我的收藏