html table固定表头

最新推荐文章于 2023-09-27 18:39:30 发布

qq_42666845

最新推荐文章于 2023-09-27 18:39:30 发布

阅读量174

点赞数

本文链接：https://blog.csdn.net/qq_42666845/article/details/81163241

版权

参考 https://segmentfault.com/a/1190000008475948

<html>
<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;text-align: center;}
.box table thead th{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>
<body><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>
</body></html>

qq_42666845

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html table固定表头

参考 https://segmentfault.com/a/1190000008475948&lt;html&gt;&lt;style&gt;*{margin: 0;padding: 0;list-style: none;}.box{width: 300px;height: 300px;margin: 50px auto 0;overflow: auto;}.box table{...
复制链接

扫一扫