Detailed example of using CSS3 translate to achieve a perfect table head fixation

Preface

The previous period of time in the work just need this function, but find a lot of can not be perfect implementation, so in this you do a fixed table head method, mainly used to CSS3 in the translate and a small section of JS code, below to see it together.

The effect is as follows:

The feeling is not very harmonious, and the code is also few, insufficient is IE9 below does not support translate attribute, but now also does not have much to test filter IE9 The following compatibility, do the front-end old to take into account the low version of the browser will inevitably let oneself shackled ...

Here's a look at the code.

Html

<p 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> &lt ;th>8</th> <th>9</th> <th>10</th> <th> 11</th> <th>12</th> <th>13</th> <th>14&lt            ;/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+ ' &                        Lt;/td>\ <td> ' +i+ ' </td>\ <td> ' +i+ ' </td>\ <td> ' +i+ ' </td>\ <td> ' +i+ ' </td>\ <t D> ' +i+ ' </td>\ <td> ' +i+ ' </td>\ <td> ' +i+ ' </td&gt            ; \ </tr> ';            } document.write (TR); </script> </tbody> </table></p>

CSS Styles

<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

<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>