首页 > 代码库 > 锁定TABLE的首行和首列
锁定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>
锁定TABLE的首行和首列
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。