其他分享
首页 > 其他分享> > Table冻结表头 只支持IE

Table冻结表头 只支持IE

作者:互联网

原文链接:http://www.cnblogs.com/GodLi/archive/2012/07/03/2574756.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<style type="text/css">
td
{
border:solid 1px blue;
background:#fff;
text-align:center;
height:15px;
}
.FixedTitleRow
{
position: relative; 
top: expression(this.offsetParent.scrollTop); 
text-align:center;
border:solid 1px black;
background-color:#ffffff;
z-index=1;
}

.FixedTitleRowTitle
{
position: relative; 
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
top: expression(this.offsetParent.scrollTop); 
border:solid 1px black;
background-color:#ffffff;
text-align:center;
z-index=3;


}
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
border:solid 1px black;
text-align:center;
background-color:#ffffff;
z-index=0;
}

.FixedDataRowspanColumn
{
position: relative;
top: expression(this.offsetParent.scrollTop); 
border:solid 1px black;
text-align:center;
background-color:#ffffff;
z-index=2;

}
</style>


</head>
<body scroll="no">
<div id="ctbody" style="width: 500px; overflow: auto; cursor: default; display: inline;
position: absolute; height: 300px;">
<table id="ctTable" style="border-collapse:collapse; width:1700px;">
<tr class="FixedTitleRow">
<td colspan="20" class="FixedDataColumn">表格标题</td>
</tr>
<tr>
<td rowspan="2" class="FixedTitleRowTitle" >项目</td>
<td rowspan="2" class="FixedTitleRowTitle">单位</td>
<td colspan="4" class="FixedTitleRow">表头横向合并1</td>
<td rowspan="2" class="FixedDataRowspanColumn">表头纵向合并1</td>
<td colspan="5" class="FixedTitleRow">表头横向合并2</td>
<td rowspan="2" class="FixedDataRowspanColumn">表头纵向合并2</td>
<td rowspan="2" class="FixedDataRowspanColumn">表头纵向合并3</td>
<td colspan="4" class="FixedTitleRow">表头横向合并3</td>
<td rowspan="2" class="FixedDataRowspanColumn">表头纵向合并4</td>
</tr>
<tr class="FixedTitleRow">
<td class="FixedTitleRow">列1</td>
<td class="FixedTitleRow" >列2</td>
<td class="FixedTitleRow" >列3</td>
<td class="FixedTitleRow" >列4</td>
<td class="FixedTitleRow" >列5</td>
<td class="FixedTitleRow" >列6</td>
<td class="FixedTitleRow" >列7</td>
<td class="FixedTitleRow" >列8</td>
<td class="FixedTitleRow" >列9</td>
<td class="FixedTitleRow" >列10</td>
<td class="FixedTitleRow" >列11</td>
<td class="FixedTitleRow" >列12</td>
<td class="FixedTitleRow" >列13</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn" rowspan="3">项目1</td>
<td width="80" class="FixedDataColumn">单位1</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td ></td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0.0%</td>
<td >0</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位2</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >2</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >1.7%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位3</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >12</td>
<td >2</td>
<td >2</td>
<td >2</td>
<td >2.3%</td>
<td >2</td>
</tr><tr>
<td width="80" class="FixedDataColumn" rowspan="3">项目2</td>
<td width="80" class="FixedDataColumn">单位1</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td ></td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0.0%</td>
<td >0</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位2</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >2</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >1.7%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位3</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >12</td>
<td >2</td>
<td >2</td>
<td >2</td>
<td >2.3%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn" rowspan="3">项目3</td>
<td width="80" class="FixedDataColumn">单位1</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td ></td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0.0%</td>
<td >0</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位2</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >2</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >1.7%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位3</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >12</td>
<td >2</td>
<td >2</td>
<td >2</td>
<td >2.3%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn" rowspan="3">项目4</td>
<td width="80" class="FixedDataColumn">单位1</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td ></td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0.0%</td>
<td >0</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位2</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >2</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >1.7%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位3</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >12</td>
<td >2</td>
<td >2</td>
<td >2</td>
<td >2.3%</td>
<td >2</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn" rowspan="3">项目5</td>
<td width="80" class="FixedDataColumn">单位1</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td ></td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0.0%</td>
<td >0</td>
</tr>
<tr>
<td width="80" class="FixedDataColumn">单位2</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >2</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >1.7%</td>
<td >2</td>
</tr>
<td width="80" class="FixedDataColumn">单位3</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >0</td>
<td >12</td>
<td >2</td>
<td >2</td>
<td >2</td>
<td >2.3%</td>
<td >2</td>
</tr>
</table>
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/GodLi/archive/2012/07/03/2574756.html

标签:12,offsetParent,text,border,表头,单位,Table,IE
来源: https://blog.csdn.net/weixin_30576859/article/details/98301117