- <html>
- <head>
- <!--固定行列头,曲滨200608-->
- <style type="text/css">
- <!--
- body,table, td, a {
- font:9pt;
- }
- .scrollRowThead
- {
- position: relative;
- left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);
- z-index:0;
- }
- .scrollColThead {
- position: relative;
- top: expression(this.parentElement.parentElement.parentElement.scrollTop);
- z-index:2;
- }
- .scrollCR {
- z-index:3;
- }
- .scrollDiv {
- height:200px;
- clear: both;
- border: 1px solid #EEEEEE;
- OVERFLOW: scroll;
- width: 100%;
- text-align:center;
- }
- .scrollColThead td,.scrollColThead th
- {
- text-align: center ;
- }
- .scrollRowThead,.scrollColThead td,.scrollColThead th
- {
- background-color:"#EEEEEE";
- }
- .scrolltable
- {
- border-bottom:1px solid #CCCCCC;
- border-right:1px solid #CCCCCC;
- }
- .scrolltable td,.scrollTable th
- {
- border-left: 1px solid #CCCCCC;
- border-top: 1px solid #CCCCCC;
- padding: 5px;
- }
- -->
- </style>
- <script language="javascript"><!--
- window.onresize = function(){mm();}
- function mm()
- {
- var div = document.getElementById("scrollDiv");
- div.style.width=document.body.clientWidth-10;
- div.style.height=document.body.clientHeight-14;
- }
- //-->
- </script>
- </head><body scroll="no" onload="mm()">
- <div id="scrollDiv" class="scrollDiv" >
- <table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable">
- <tr class="scrollColThead" >
- <th class="scrollRowThead scrollCR" colspan="13" >
- 本演示子兼容ie 浏览器,测试日期2006 年,其他浏览器在div onscroll 事件用js实现和本列相同的样式应该也可实现
- </th>
- </tr>
- <tr class="scrollColThead" >
- <th class="scrollRowThead scrollCR" > </th>
- <th colspan="2">列头</th>
- <th colspan="10">列头</th>
- </tr>
- <tr class="scrollColThead">
- <th class="scrollRowThead scrollCR" >h1</th>
- <th >h2</th>
- <th >h3</th>
- <th >h4</th>
- <th >h5</th>
- <th >565656</th>
- <th >565656</th>
- <th >5656565656</th>
- <th >56565656</th>
- <th >56565656</th>
- <th >56565656</th>
- <th >56565656</th>
- <th >56566666666666666666666666666666666666666666666666666666666666666666565656</th>
- </tr>
- <tr>
- <td class="scrollRowThead" ><input type="checkbox" name="checkbox"
- value="checkbox" style="width: 20px">
- a</td>
- <td>单元格2</td>
- <td>单元格3</td>
- <td>单元格4</td>
- <td>单元格5</td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td class="scrollRowThead" ><input type="checkbox" name="checkbox2" value="checkbox">
- b</td>
- <td>单元格2</td>
- <td>单元格3</td>
- <td>单元格4</td>
- <td>单元格5</td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td nowrap class="scrollRowThead" ><input type="checkbox" name="checkbox3" value="checkbox">
- 1</td>
- <td nowrap>单元格2</td>
- <td nowrap>单元格3</td>
- <td nowrap>单元格4</td>
- <td nowrap>单元格5</td>
- <td nowrap> </td>
- <td nowrap> </td>
- <td nowrap> </td>
- <td nowrap> </td>
- <td nowrap> </td>
- <td nowrap> </td>
- <td nowrap> </td>
- <td nowrap> </td>
- </tr>
- <tr>
- <td class="scrollRowThead" ><input type="checkbox" name="checkbox4" value="checkbox">
- 2</td>
- <td>单元格2</td>
- <td>单元格3</td>
- <td>单元格4</td>
- <td>单元格5</td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td class="scrollRowThead" ><input type="checkbox" name="checkbox5" value="checkbox">
- 3</td>
- <td>单元格2</td>
- <td>单元格3</td>
- <td>单元格4</td>
- <td>单元格5</td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td class="scrollRowThead" ><input type="checkbox" name="checkbox6" value="checkbox">
- 4</td>
- <td>单元格2</td>
- <td>单元格3</td>
- <td>单元格4</td>
- <td>单元格5</td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td class="scrollRowThead" ><input type="checkbox" name="checkbox7" value="checkbox">
- 5</td>
- <td>单元格2</td>
- <td>单元格3</td>
- <td>单元格4</td>
- <td>单元格5</td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- </table>
- </div>
- </body></html>