html中表格table冻结行和列
程序员文章站
2022-07-12 11:54:19
...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>完美冻结列和行 </title>
<style type="text/css">
.FixedHeaderColumnsTableDiv
{
overflow: auto;
position: relative;
}
.FixedCell
{
position: relative;
top: expression(this.offsetParent.scrollTop);
left: expression(this.parentElement.offsetParent.scrollLeft);
z-index: 1800;
}
.FixedHeaderRow1
{
position: relative;
top: expression(this.offsetParent.scrollTop);
background-color: #ccc;
z-index: 300;
}
.FixedHeaderRow2
{
position: relative;
top: expression(this.offsetParent.scrollTop);
z-index: 290;
background-color:#ffccff;
}
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
z-index: 200;
background-color: Aqua;
}
</style>
</head>
<body>
<div class="FixedHeaderColumnsTableDiv" style="width: 1000px; height: 100px">
<table border="0" cellpadding="0" cellspacing="0" width="1200px">
<tr class="FixedHeaderRow1">
<td class="FixedCell" style="width: 80px">
header1
</td>
<td class="FixedCell" style="width: 80px">
header2
</td>
<td class="FixedCell" style="width: 80px">
header3
</td>
<td class="FixedCell" style="width: 80px">
header4
</td>
<td style="width: 80px">
header5
</td>
<td style="width: 80px">
header6
</td>
<td style="width: 80px">
header7
</td>
<td style="width: 80px">
header8
</td>
<td style="width: 80px">
header9
</td>
<td style="width: 80px">
header10
</td>
</tr>
<tr class="FixedHeaderRow2">
<td class="FixedCell" style="width: 80px" align="center">
ss
</td>
<td class="FixedCell" style="width: 80px" align="center">
ss
</td>
<td class="FixedCell" style="width: 80px">
header16
</td>
<td class="FixedHeaderColumn1" colspan="7" align="center">
header17dddddddddddd
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
</table>
</div>
</body>
</html>
以上第一种方式摘自：http://hi.baidu.com/zouyou626/item/b50ece1615bf0b781009b5c6
下面开始第二种方式：
<html>
<head>
<title>表格行列冻结示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
td
{
height:30px;
width:180px;
}
</style>
</head>
<body>
<div style="OVERFLOW: scroll;width:100%;height:140px;">
<table id="oFrozenTable" border="1" cellspacing="1" cellpadding="0" bordercolor="#74c6f5" width="900" bgcolor="#ffffff">
<tr>
<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 nowrap>第一行</td>
<td nowrap>1.1</td>
<td nowrap>1.2</td>
<td nowrap>1.3</td>
<td nowrap>1.4</td>
<td nowrap>1.5</td>
<td nowrap>1.6</td>
<td nowrap>1.7</td>
</tr>
<tr>
<td nowrap>第二行</td>
<td nowrap>2.1</td>
<td nowrap>2.2</td>
<td nowrap>2.3</td>
<td nowrap>2.4</td>
<td nowrap>2.5</td>
<td nowrap>2.6</td>
<td nowrap>2.7</td>
</tr>
<tr>
<td nowrap>第三行</td>
<td nowrap>3.1</td>
<td nowrap>3.2</td>
<td nowrap>3.3</td>
<td nowrap>3.4</td>
<td nowrap>3.5</td>
<td nowrap>3.6</td>
<td nowrap>3.7</td>
</tr>
<tr>
<td nowrap>第四行</td>
<td nowrap>4.1</td>
<td nowrap>4.2</td>
<td nowrap>4.3</td>
<td nowrap>4.4</td>
<td nowrap>4.5</td>
<td nowrap>4.6</td>
<td nowrap>4.7</td>
</tr>
</table>
</div>
<script language="javascript" src="frozenTable.js"></script>
<script language="javascript">
FrozenTable(oFrozenTable, 1, 1, 1);
function FrozenTable(oFrozenTable, iFrozenRowHead, iFrozenRowFoot, iFrozenColLeft)
{
oFrozenTable.HeadRow = iFrozenRowHead;
var oDivMaster = oFrozenTable.parentElement;
if(oDivMaster.tagName != 'DIV') return;
if((oFrozenTable.offsetHeight > oDivMaster.offsetHeight) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth))
{
//创建并克隆LeftHead表格
if((iFrozenColLeft > 0) && (iFrozenRowHead > 0))
{
var oTableLH = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableLH.insertBefore(newTBody);
oTableLH.id = "oTableLH";
oDivMaster.parentElement.insertBefore(oTableLH);
CloneTable(oFrozenTable, oTableLH, 0, iFrozenRowHead, iFrozenColLeft)
oTableLH.srcTable = oFrozenTable;
with(oTableLH.style)
{
zIndex = 804;
position = 'absolute'
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop;
}
}
//创建并克隆LeftFoot表格
if((iFrozenColLeft > 0) && (iFrozenRowFoot > 0))
{
var oTableLF = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableLF.insertBefore(newTBody);
oTableLF.id = "oTableLF";
oDivMaster.parentElement.insertBefore(oTableLF);
CloneTable(oFrozenTable, oTableLF,oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, iFrozenColLeft)
oTableLF.srcTable = oFrozenTable;
with(oTableLF.style)
{
zIndex = 803;
position = 'absolute'
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - oTableLF.offsetHeight - 16;
}
}
}
//创建DivHead、创建并克隆HeadTar表格
if((iFrozenRowHead > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight))
{
var DivHead = document.createElement("DIV");
oDivMaster.parentElement.insertBefore(DivHead);
var oTableHead = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableHead.id = "HeadTar";
oTableHead.style.position = "relative"
oTableHead.insertBefore(newTBody);
DivHead.insertBefore(oTableHead);
CloneTable(oFrozenTable, oTableHead, 0, iFrozenRowHead, -1)
HeadTar.srcTable = oFrozenTable;
with(DivHead.style)
{
overflow = "hidden";
zIndex = 802;
pixelWidth = oDivMaster.offsetWidth - 16
position = 'absolute';
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop;
}
}
//创建DivFoot、创建并克隆FootTar表格
if((iFrozenRowFoot > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight))
{
var DivFoot = document.createElement("DIV");
oDivMaster.parentElement.insertBefore(DivFoot);
var oTableFoot = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableFoot.insertBefore(newTBody);
oTableFoot.id = "FootTar";
oTableFoot.style.position = "relative"
DivFoot.insertBefore(oTableFoot);
CloneTable(oFrozenTable, oTableFoot, oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, -1)
oTableFoot.srcTable = oFrozenTable;
with(DivFoot.style)
{
overflow = "hidden";
zIndex = 801;
pixelWidth = oDivMaster.offsetWidth - 16
position = 'absolute'
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - DivFoot.offsetHeight - 16;
}
}
//创建DivLeft、创建并克隆LeftTar表格
if((iFrozenColLeft > 0) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth))
{
var DivLeft = document.createElement("DIV");
oDivMaster.parentElement.insertBefore(DivLeft);
var oTableLeft = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableLeft.insertBefore(newTBody);
oTableLeft.id = "LeftTar";
oTableLeft.style.position = "relative";
DivLeft.insertBefore(oTableLeft);
CloneTable(oFrozenTable, oTableLeft, 0, oFrozenTable.rows.length, iFrozenColLeft)
LeftTar.srcTable = oFrozenTable;
with(DivLeft.style)
{
overflow = "hidden";
zIndex = 800;
pixelWidth = oDivMaster.offsetWidth - 16
pixelHeight = oDivMaster.offsetHeight - 16
position = 'absolute'
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop;
}
}
//为主DIV附加onscroll事件
oDivMaster.attachEvent("onscroll", DivMasterScroll);
}
//+----------------------------------------------------------------------------
//
//功能描述：克隆表格
//
//输入参数：oSrcTable 源表格
// oNewTable 新表格
// iRowStart 克隆开始行
// iRowEnd 克隆结束行
// iColumnEnd 克隆结束列
//
//-----------------------------------------------------------------------------
function CloneTable(oSrcTable, oNewTable, iRowStart, iRowEnd, iColumnEnd)
{
//循环控制参数
var i, j, k = 0;
//新增行、列
var newTR, newTD;
//新表格宽度、高度
var iWidth = 0, iHeight = 0;
//拷贝Attributes、events and styles
oNewTable.mergeAttributes(oSrcTable);
//循环克隆指定行
for (i = iRowStart; i < iRowEnd; i++)
{
newTR = oNewTable.insertRow(k);
//拷贝Attributes、events and styles
newTR.mergeAttributes(oSrcTable.rows[i]);
iHeight += oSrcTable.rows[i].offsetHeight;
iWidth = 0;
//循环克隆指定列
for(j = 0; j < (iColumnEnd == -1 ? oSrcTable.rows[i].cells.length: iColumnEnd); j++)
{
newTD = oSrcTable.rows[i].cells[j].cloneNode(true);
iWidth += oSrcTable.rows[i].cells[j].offsetWidth;
newTR.insertBefore(newTD);
newTD.style.pixelWidth = oSrcTable.rows[i].cells[j].offsetWidth;
}
k++;
}
oNewTable.style.pixelWidth = iWidth;
oNewTable.style.pixelHeight = iHeight;
}
//+----------------------------------------------------------------------------
//
// 功能描述：主DIV的onscroll事件
//
// 输入参数：无
//
//-----------------------------------------------------------------------------
function DivMasterScroll()
{
var oDivMaster = window.event.srcElement;
if(document.getElementById('HeadTar') != null)
{
document.getElementById('HeadTar').style.pixelLeft = - oDivMaster.scrollLeft;
}
if(document.getElementById('FootTar') != null)
{
document.all('FootTar').style.pixelLeft = - oDivMaster.scrollLeft;
}
if(document.getElementById('LeftTar') != null)
{
document.all('LeftTar').style.pixelTop = - oDivMaster.scrollTop;
}
}
</script>
</body>
</html>
这个第二种方式摘自：http://blog.csdn.net/jiacky/article/details/1746976