天天看點
傳回

css 實作的TABLE 固定行列(IE)

  1. <html>
  2. <head> 
  3. <!--固定行列頭，曲濱200608-->
  4. <style type="text/css"> 
  5. <!-- 
  6. body,table, td, a { 
  7. font:9pt; 
  8. } 
  9. .scrollRowThead 
  10. {
  11.      position: relative; 
  12.      left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);
  13.      z-index:0;
  14. }
  15. .scrollColThead {
  16.      position: relative; 
  17.      top: expression(this.parentElement.parentElement.parentElement.scrollTop);
  18.      z-index:2;
  19. }
  20. .scrollCR {
  21.      z-index:3;
  22. } 
  23. .scrollDiv {
  24. height:200px;
  25. clear: both; 
  26. border: 1px solid #EEEEEE;
  27. OVERFLOW: scroll;
  28. width: 100%; 
  29. text-align:center;
  30. }
  31. .scrollColThead td,.scrollColThead th
  32. {
  33.      text-align: center ;
  34. }
  35. .scrollRowThead,.scrollColThead td,.scrollColThead th
  36. {
  37. background-color:"#EEEEEE";
  38. }
  39. .scrolltable
  40. {
  41. border-bottom:1px solid #CCCCCC; 
  42. border-right:1px solid #CCCCCC; 
  43. }
  44. .scrolltable td,.scrollTable th
  45. {
  46.      border-left: 1px solid #CCCCCC; 
  47.      border-top: 1px solid #CCCCCC; 
  48.      padding: 5px; 
  49. }
  50. --> 
  51. </style> 
  52. <script   language="javascript"><!--   
  53.   window.onresize   =   function(){mm();}   
  54.   function   mm()   
  55.   {   
  56.       var   div   =   document.getElementById("scrollDiv");
  57.       div.style.width=document.body.clientWidth-10;
  58.       div.style.height=document.body.clientHeight-14;  
  59.   }   
  60.   //-->   
  61.   </script>
  62. </head><body  scroll="no" onload="mm()">
  63. <div id="scrollDiv" class="scrollDiv" > 
  64. <table border="0" cellpadding="3" cellspacing="0" width="100%"  class="scrollTable"> 
  65.  <tr class="scrollColThead"  > 
  66. <th class="scrollRowThead scrollCR" colspan="13" >
  67. 本示範子相容ie 浏覽器，測試日期2006 年,其他浏覽器在div onscroll 事件用js實作和本列相同的樣式應該也可實作
  68. </th> 
  69. </tr>
  70. <tr class="scrollColThead"  > 
  71. <th class="scrollRowThead scrollCR"  > </th> 
  72. <th colspan="2">列頭</th>
  73. <th colspan="10">列頭</th> 
  74. </tr>
  75. <tr class="scrollColThead"> 
  76. <th class="scrollRowThead  scrollCR"  >h1</th> 
  77. <th >h2</th> 
  78. <th >h3</th> 
  79. <th >h4</th> 
  80. <th >h5</th> 
  81. <th >565656</th>
  82. <th >565656</th>
  83. <th >5656565656</th>
  84. <th >56565656</th>
  85. <th >56565656</th>
  86. <th >56565656</th>
  87. <th >56565656</th>
  88. <th >56566666666666666666666666666666666666666666666666666666666666666666565656</th>
  89. </tr>
  90. <tr> 
  91. <td class="scrollRowThead"  ><input type="checkbox" name="checkbox" 
  92.         value="checkbox" style="width: 20px">
  93.   a</td> 
  94. <td>單元格2</td> 
  95. <td>單元格3</td> 
  96. <td>單元格4</td> 
  97. <td>單元格5</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. <tr>
  108. <td class="scrollRowThead"  ><input type="checkbox" name="checkbox2" value="checkbox">
  109.   b</td> 
  110. <td>單元格2</td> 
  111. <td>單元格3</td> 
  112. <td>單元格4</td> 
  113. <td>單元格5</td> 
  114. <td> </td>
  115. <td> </td>
  116. <td> </td>
  117. <td> </td>
  118. <td> </td>
  119. <td> </td>
  120. <td> </td>
  121. <td> </td>
  122. </tr> 
  123. <tr> 
  124. <td nowrap class="scrollRowThead"  ><input type="checkbox" name="checkbox3" value="checkbox">
  125.   1</td> 
  126. <td nowrap>單元格2</td> 
  127. <td nowrap>單元格3</td> 
  128. <td nowrap>單元格4</td> 
  129. <td nowrap>單元格5</td> 
  130. <td nowrap> </td>
  131. <td nowrap> </td>
  132. <td nowrap> </td>
  133. <td nowrap> </td>
  134. <td nowrap> </td>
  135. <td nowrap> </td>
  136. <td nowrap> </td>
  137. <td nowrap> </td>
  138. </tr> 
  139. <tr> 
  140. <td class="scrollRowThead"  ><input type="checkbox" name="checkbox4" value="checkbox">
  141.   2</td> 
  142. <td>單元格2</td> 
  143. <td>單元格3</td> 
  144. <td>單元格4</td> 
  145. <td>單元格5</td> 
  146. <td> </td>
  147. <td> </td>
  148. <td> </td>
  149. <td> </td>
  150. <td> </td>
  151. <td> </td>
  152. <td> </td>
  153. <td> </td>
  154. </tr>
  155. <tr> 
  156. <td class="scrollRowThead"  ><input type="checkbox" name="checkbox5" value="checkbox">
  157.   3</td> 
  158. <td>單元格2</td> 
  159. <td>單元格3</td> 
  160. <td>單元格4</td> 
  161. <td>單元格5</td> 
  162. <td> </td>
  163. <td> </td>
  164. <td> </td>
  165. <td> </td>
  166. <td> </td>
  167. <td> </td>
  168. <td> </td>
  169. <td> </td>
  170. </tr> 
  171. <tr> 
  172. <td class="scrollRowThead"  ><input type="checkbox" name="checkbox6" value="checkbox">
  173.   4</td> 
  174. <td>單元格2</td> 
  175. <td>單元格3</td> 
  176. <td>單元格4</td> 
  177. <td>單元格5</td> 
  178. <td> </td>
  179. <td> </td>
  180. <td> </td>
  181. <td> </td>
  182. <td> </td>
  183. <td> </td>
  184. <td> </td>
  185. <td> </td>
  186. </tr> 
  187. <tr> 
  188. <td class="scrollRowThead" ><input type="checkbox" name="checkbox7" value="checkbox">
  189.   5</td> 
  190. <td>單元格2</td> 
  191. <td>單元格3</td> 
  192. <td>單元格4</td> 
  193. <td>單元格5</td> 
  194. <td> </td>
  195. <td> </td>
  196. <td> </td>
  197. <td> </td>
  198. <td> </td>
  199. <td> </td>
  200. <td> </td>
  201. <td> </td>
  202. </tr> 
  203. </table> 
  204. </div> 
  205. </body></html> 
html 代碼收藏 table ie css javascript 浏覽器 class
上一篇: Android使用webview怎麼加載uri_珍愛生命，遠離安卓WebView
下一篇: JavaWeb筆記——基礎

繼續閱讀