The report table design designed in the project has relatively too many columns. When dragging the scroll bar below, it cannot correspond to the column corresponding to the table header, so I searched online for a long time, and finally I found some reference materials on the Internet, and then summarized a fixed header demo that is compatible with row and column merging.

Multiple browsers have not done much testing, and it has been tested in ie6.

I have been waiting for this function for a long time and finally found a solution today. I have summarized it in javaeye for easy reference in the future. There may be better implementation methods. I hope some experts will pass by and leave me some better implementation examples for future communication.

The following is the relevant css

Html code

1. >
Html code

1. 利用CSS代码让Table产生固定表头

     
2.   
3.   
4.       
5.   
6.      
7.   列头  
8.   列头  
9.   列头  
10.   
11.   
12.   h1  
13.   h2  
14.   h3  
15.   h4  
16.   h5  
17.   
18.   
19.   
20.     
21.       
22.     a  
23.   单元格2  
24.   单元格3  
25.   单元格4  
26.   单元格5  
27.   单元格5  
28.   
29.   
30.     
31.       
32.     b  
33.   单元格2  
34.   单元格3  
35.   单元格4  
36.   单元格5  
37.   单元格5  
38.   
39.   
40.     
41.       
42.     c  
43.   单元格2  
44.   单元格3  
45.   单元格4  
46.   单元格5  
47.   单元格5  
48.   
49.   
50.     
51.       
52.     d  
53.   单元格2  
54.   单元格3  
55. Cell 4
56. Cell 5
57. Cell 5
59. ="checkbox5" value="checkbox">
60. e
61. Cell 2 Cell 3
62. Cell 4 Cell 5
65. f
66. Cell 2
67. Cell 3
68. Cell 4
69. Cell 5
70. Cell 5
75. g
76. Cell 2
77. Cell 3
78. Cell 4
80. Cell 5