锁定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}

 

你可能感兴趣的:(table)