码迷,mamicode.com
首页 > 其他好文 > 详细

锁定TABLE的首行和首列

时间:2014-09-23 12:49:24      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   ar   div   sp   cti   

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的首行和首列

标签:style   blog   http   color   io   ar   div   sp   cti   

原文地址:http://www.cnblogs.com/MarkTang/p/3987828.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!