css 固定不动表头 拖拽翻转条时对应表头所对应的

2021-03-11 04:17 jianzhan
新项目中设计方案的表格table设计方案的列数相对性过量,当拖拽正下方的翻转条时没法对应表头所对应的列,因而在网络上检索了好1段生活,最终在网络上寻找了1些参照材料,随后总结梳理出适配队伍合拼的固定不动表头demo。
多访问器沒有做太多检测,在ie6中已检测根据。

作用希望了很久今日终究寻找处理的方法,总结到javaeye中便捷往后查阅。完成方法将会也有更好的,期待有大牛途经,给我留点更好的完成事例作往后沟通交流之用。
下列是有关的css

拷贝编码
编码以下:

<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;}
/*div外框*/
.scrollDiv {height:200px;clear: both; border: 1px solid #EEEEEE;OVERFLOW: scroll;width: 320px; }
/*行头垂直居中*/
.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; }
.scrollTable thead th{background-color:#EEEEEE;font-weight:bold;position:relative;}
-->
</style>

下列是HTML

拷贝编码
编码以下:

<h1>运用CSS编码让Table造成固定不动表头</h1>
<div id="scrollDiv" class="scrollDiv" >
<table border="0" cellpadding="3" cellspacing="0" width="500" class="scrollTable">
<thead>
<tr class="scrollColThead" >
<th class="scrollRowThead scrollCR" >&nbsp;</th>
<th colspan="2">列头</th>
<th colspan="2">列头</th>
<th rowspan="2">列头</th>
</tr>
<tr class="scrollColThead" >
<th class="scrollRowThead scrollCR" >h1</th>
<th >h2</th>
<th >h3</th>
<th >h4</th>
<th >h5</th>
</tr>
</thead>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox" value="checkbox">
a</td>
<td>模块格2</td>
<td>模块格3</td>
<td>模块格4</td>
<td>模块格5</td>
<td>模块格5</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>模块格5</td>
</tr>
<tr>
<td nowrap class="scrollRowThead" >
<input type="checkbox" name="checkbox3" value="checkbox">
c</td>
<td nowrap>模块格2</td>
<td nowrap>模块格3</td>
<td nowrap>模块格4</td>
<td nowrap>模块格5</td>
<td nowrap>模块格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>模块格2</td>
<td>模块格3</td>
<td>模块格4</td>
<td>模块格5</td>
<td>模块格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>模块格2</td>
<td>模块格3</td>
<td>模块格4</td>
<td>模块格5</td>
<td>模块格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>模块格2</td>
<td>模块格3</td>
<td>模块格4</td>
<td>模块格5</td>
<td>模块格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>模块格2</td>
<td>模块格3</td>
<td>模块格4</td>
<td>模块格5</td>
<td>模块格5</td>
</tr>
</table>
</div>

此外填补1点,假如在表头合拼的是最终1行的情况下,排版将出現难题。因为上面合拼的仅有两行,因而款式沒有遭受更改,假如要解决,临时的处理方法便是不符合并rowspan最终1行,将其多行显示信息,有点苍白无力,但找不到处理方法。相近状况以下图: