Detailed explanation of the example of using css3 translate to perfectly achieve the fixed effect of the table header

Preface

I just needed this function at work some time ago, but I couldn’t find it perfectly after searching a lot, so here I will introduce it myself I made a method to fix the table header, mainly using translate in css3 and a small piece of js code. Let’s take a look below.

The effect is as follows:

It feels very harmonious, and there are few codes. The disadvantage is IE9 and below do not support the translate attribute, but now there is not much to test for compatibility below IE9. When doing front-end, you will inevitably be constrained by taking into account lower version browsers. . . .

Let’s take 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>
                <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 = &#39;&#39;;
            for(var i=0; i<15; i++) {
                tr += &#39;<tr>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                        <td>&#39;+i+&#39;</td>\
                    </tr>&#39;;
            }
            document.write(tr);
            </script>                
        </tbody>
    </table>
</p>

CSS style

<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 = $(&#39;.box&#39;);
    boxEle.addEventListener(&#39;scroll&#39;, function(e) {
        this.querySelector(&#39;thead&#39;).style.transform = &#39;translate(0, &#39;+this.scrollTop+&#39;px)&#39;;
    });
}
</script>

For more detailed explanations on how to use css3 translate to perfectly achieve the header fixed effect example, please pay attention to the PHP Chinese website for related articles!