锁定TABLE的首行和首列
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>
4. CSS不同样式
1 body{font-size:12px;} 2 .t_n{width:30px; heihgt:240px!important; height:482px; float:left; border-left:1px solid #000} 3 .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:57px; height:59px} 4 .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px} 5 .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center} 6 .dd{height:420px!important; height:208px; overflow-y:hidden; width:60px;} 7 .t_i{width:1400px; height:auto; margin-left:60px; border-right:1px solid #000; border-top:1px solid #000} 8 .t_i_h{width:100%; overflow-x:hidden; background:buttonface;} 9 .ee{width:1618px!important; width:1620px} 10 .t_i_h table{width:1600px;} 11 .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center} 12 .cc{width:100%; height:435px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;} 13 .cc table{width:1600px; } 14 .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center} 18 body{font-size:12px;} 19 .t_n{width:0px;heihgt:240px!important; height:480px; float:left; border-left:1px solid #000} 20 .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:60px; height:20px} 21 .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px} 22 .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center} 23 .dd{height:420px!important; height:208px; overflow-y:hidden; width:60px;} 24 .t_i{width:1400px; height:auto; margin-left:60px; border-right:1px solid #000; border-top:1px solid #000} 25 .t_i_h{width:100%; overflow-x:hidden; background:buttonface;} 26 .ee{width:1618px!important; width:1620px} 27 .t_i_h table{width:1600px;} 28 .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center} 29 .cc{width:100%; height:435px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;} 30 .cc table{width:1600px; } 31 .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}
