js实现table表格表头固定

Html

Css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div style="position:relative;">
    <div id="hDiv" style=" width:500px;height: 24px;overflow:hidden;position:absolute; ">
        <table id="tb0" width="800px" style="position:absolute; ">
            <thead>
                <tr>
                    <th width="80">B0
                        </th><th width="80">B1
                            </th><th width="80">B2
                                </th><th width="80">B3
                                    </th><th width="80">B4
                                        </th><th width="80">B5
                                            </th><th width="80">B6
                                                </th><th width="80">B7
                                                    </th><th width="80">B8
                                                        </th><th width="80">B9
                </th></tr>
            </thead>
        </table>
    </div>
    <div id="dDiv" style="position:absolute; height:210px;top:23px; width:500px;overflow:auto;">
        <table id="tb1" width="800px">
            <tbody><tr>
                <td width="80">00</td>
                <td width="80">11</td>
                <td width="80">22</td>
                <td width="80">33</td>
                <td width="80">44</td>
                <td width="80">55</td>
                <td width="80">66</td>
                <td width="80">77</td>
                <td width="80">88</td>
                <td width="80">99</td>
            </tr>
            <tr>
                <td width="80">00</td>
                <td width="80">11</td>
                <td width="80">22</td>
                <td width="80">33</td>
                <td width="80">44</td>
                <td width="80">55</td>
                <td width="80">66</td>
                <td width="80">77</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
var hDiv = document.getElementById('hDiv');
var dDiv = document.getElementById('dDiv');
var tb0 = document.getElementById('tb0');
dDiv.onscroll = function() {
    tb0.style.left = dDiv.scrollLeft * -1 + 'px'
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

js实现table表格表头固定



代码描述：table表格，竖向滚动时th 固定不动

更新时间：2019-11-01 09:41:31

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

安简曦

相关代码

js实现table表格表头固定

最新

11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99

11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99

11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99
11	22	33	44	55	66	77	88	99