CSS3+JS实现表头固定成效的代码是什么

很多朋友都对“CSS3+JS实现表头固定效果的代码是什么”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！

前段时间在工作中正好需要这个功能，但是找了很多都不能完美的实现，所以在此就自己做了一个固定表头的方法，主要用到了css3中的translate和一小段js代码。

感觉是不是很和谐，而且代码也少，不足的是IE9以下不支持translate属性，但现在也没多少要考滤IE9以下的兼容了吧，做前端老兼顾低版本的浏览器难免会让自己束手束脚。

下面来看下代码吧

HTML

<div class="box">

  <table>

    <thead>

      <tr>

        <th>1</th>

        <th>2</th>

        <th>3</th>

        <th>4</th>

        <th>5</th>

        <th>6</th>

        <th>7</th>

        <th>8</th>

        <th>9</th>

        <th>10</th>

        <th>11</th>

        <th>12</th>

        <th>13</th>

        <th>14</th>

        <th>15</th>

      </tr>

    </thead>

    <tbody>

      <script>

      var tr = '';

      for(var i=0; i<15; i++) {

        tr += '<tr>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

            <td>'+i+'</td>\

          </tr>';

      }

      document.write(tr);

      </script>        

    </tbody>

  </table>

</div>

CSS样式

<style>

*{ margin: 0; padding: 0; list-style: none;}

.box {

  width: 300px;

  height: 300px;

  margin: 50px auto 0;

  overflow: auto;

}

.box table{

  width: 100%;

  border-collapse: collapse;

  border-right: 1px solid #ccc;

  border-top: 1px solid #ccc;

  text-align: center;

}

.box table thead {

  background-color: #ccc;

}

.box table th,

.box table td {

  padding: 8px 10px;

  border-left: 1px solid #ccc;

  border-bottom: 1px solid #ccc;

  white-space: nowrap;

}

</style>

JS脚本

<script>

window.onload = function() {

  var $ = document.querySelector.bind(document);

  var boxEle = $('.box');

  boxEle.addEventListener('scroll', function(e) {

    this.querySelector('thead').style.transform = 'translate(0, '+this.scrollTop+'px)';

  });

}

</script>

这篇关于“CSS3+JS实现表头固定效果的代码是什么”的文章就介绍到这了,更多相关的内容，小编将为大家输出更多高质量的实用文章！

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!