利用css3 translate完美实现表头固定效果

2024-07-11 08:41:54

字体：大中小

来源：转载

供稿：网友

前言

前段时间在工作中正好需要这个功能，但是找了很多都不能完美的实现，所以在此就自己做了一个固定表头的方法，主要用到了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>

总结

好了，以上就是这篇文章的全部内容了，代码是不是真的很少呢，还在等什么？快点感受一下吧。希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

上一篇：多步骤进度条的实现原理及代码

下一篇：为何img、input等内联元素可以设置宽高