<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>
<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>
<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 translate实现表头固定
最新推荐文章于 2021-08-03 19:37:33 发布