前言
前段時間在工作中正好需要這個功能，但是找了很多都不能完美的實現，所以在此就自己做了一個固定表頭的方法，主要用到了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>總結
好了，以上就是這篇文章的全部內容了，代碼是不是真的很少呢，還在等什么？快點感受一下吧。希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
