1.
2.
3.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>锁定TABLE的首行和首列</title>
6 <style>
7 body{font-size:12px;}
8 .t_n{rowspan:1;width:30px; height:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
9 .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:auto; rowspan:‘2‘}
10 .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}
11 .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}
12 .dd{height:200px!important; height:208px; overflow-y:hidden;}
13 .t_i{width:500px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000}
14 .t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
15 .ee{width:618px!important; width:620px}
16 .t_i_h table{width:600px;}
17 .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}
18 .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;}
19 .cc table{width:600px; }
20 .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}
21 </style>
22 <script>
23 function aa()
24 {
25 var a = document.getElementById("cc").scrollTop;
26 var b = document.getElementById("cc").scrollLeft;
27 document.getElementById("dd").scrollTop = a;
28 document.getElementById("hh").scrollLeft = b;
29 }
30 </script>
31 </head>
32 <body>
33 <div class="t_n">
34 <span>序号
35 </span>
36 <div class="dd" id="dd">
37 <table cellpadding="0" cellspacing="0" border="0" class="t_number">
38 <tbody>
39 <tr>
40 <td style="height:20px"> </td>
41 <tr>
42 <td>1</td>
43 </tr>
44 <tr>
45 <td>2</td>
46 </tr>
47 <tr>
48 <td>3</td>
49 </tr>
50 <tr>
51 <td>4</td>
52 </tr>
53 <tr>
54 <td>5</td>
55 </tr>
56 <tr>
57 <td>6</td>
58 </tr>
59 <tr>
60 <td>7</td>
61 </tr>
62 <tr>
63 <td>8</td>
64 </tr>
65 <tr>
66 <td>9</td>
67 </tr>
68 <tr>
69 <td>10</td>
70 </tr>
71 <tr>
72 <td>11</td>
73 </tr>
74 <tr>
75 <td>12</td>
76 </tbody>
77 </table>
78 </div>
79 </div>
80 <!--table栏目-->
81 <div class="t_i">
82 <div class="t_i_h" id="hh">
83 <div class="ee">
84 <table cellpadding="0" cellspacing="0" border="0">
85 <tr>
86 <td colspan="2">星期1</td>
87 <td colspan="2">星期2</td>
88 <td colspan="2">星期3</td>
89 <td colspan="2">星期4</td>
90 <td colspan="2">星期5</td>
91 <td colspan="2">星期6</td>
92 </tr>
93 <tr>
94 <td>上午</td>
95 <td>下午</td>
96 <td>上午</td>
97 <td>下午</td>
98 <td>上午</td>
99 <td>下午</td>
100 <td>上午</td>
101 <td>下午</td>
102 <td>上午</td>
103 <td>下午</td>
104 <td>上午</td>
105 <td>下午</td>
106 </tr>
107 </table>
108 </div>
109 </div>
110 <div class="cc" id="cc" onscroll="aa()">
111 <table cellpadding="0" cellspacing="0" border="0">
112 <tr>
113 <td >1</td>
114 <td >1</td>
115 <td >1</td>
116 <td >1</td>
117 <td >1</td>
118 <td >1</td>
119 </tr>
120 <tr>
121 <td>2</td>
122 <td>2</td>
123 <td>2</td>
124 <td>2</td>
125 <td>2</td>
126 <td>2</td>
127 </tr>
128 <tr>
129 <td>3</td>
130 <td>3</td>
131 <td>3</td>
132 <td>3</td>
133 <td>3</td>
134 <td>3</td>
135 </tr>
136 <tr>
137 <td>4</td>
138 <td>4</td>
139 <td>4</td>
140 <td>4</td>
141 <td>4</td>
142 <td>4</td>
143 </tr>
144 <tr>
145 <td>5</td>
146 <td>5</td>
147 <td>5</td>
148 <td>5</td>
149 <td>5</td>
150 <td>5</td>
151 </tr>
152 <tr>
153 <td>6</td>
154 <td>6</td>
155 <td>6</td>
156 <td>6</td>
157 <td>6</td>
158 <td>6</td>
159 </tr>
160 <tr>
161 <td>7</td>
162 <td>7</td>
163 <td>7</td>
164 <td>7</td>
165 <td>7</td>
166 <td>7</td>
167 </tr>
168 <tr>
169 <td>8</td>
170 <td>8</td>
171 <td>8</td>
172 <td>8</td>
173 <td>8</td>
174 <td>8</td>
175 </tr>
176 <tr>
177 <td>9</td>
178 <td>9</td>
179 <td>9</td>
180 <td>9</td>
181 <td>9</td>
182 <td>9</td>
183 </tr>
184 <tr>
185 <td>10</td>
186 <td>10</td>
187 <td>10</td>
188 <td>10</td>
189 <td>10</td>
190 <td>10</td>
191 </tr>
192 <tr>
193 <td>11</td>
194 <td>11</td>
195 <td>11</td>
196 <td>11</td>
197 <td>11</td>
198 <td>11</td>
199 </tr>
200 </table>
201 </div>
202 </div>
203 </body>
204 </html>
时间： 2024-10-11 20:38:01