[方法一] 固定表格标题-表格内容滚动

ScrollTable.htm 显示页面

<HTML>

<HEAD>

<STYLE>

.tblMain

{

behavior:url(scrolltable.htc);

background-color: highlight;

border: 1px solid darkblue;

font-family: Verdana;

font-size: .8em;

}

.tblHeader

{

color: highlighttext;

}

.tblBody

{

background-color: #EEEEEE;

color: darkblue;

}

</STYLE>

</HEAD>

<BODY>

<TABLE bodyHeight="100" bodyCSS="tblBody" headerCSS="tblHeader"

class="tblMain" width="75%" cellspacing=5 cellpadding=0>

<TR>

<TD nowrap>Header A</TD>

<TD nowrap>Header B</TD>

<TD nowrap>Header C</TD>

</TR>

<TR>

<TD>Aaaaaaaaaaaaaaaaaaa</TD><TD>B</TD><TD>Ccccccccccccccccccc</TD>

</TR>

<TR>

<TD>A</TD><TD>Bbbbbbb</TD><TD>C</TD>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

ScrollTable.htc 控件实现页

<PUBLIC:ATTACH event="ondocumentready" handler="onDocumentReady" />

function onDocumentReady()

{

// Create elements

var tblHeader = this.cloneNode(false);

var tblBody = this.cloneNode(false);

var divCntr = document.createElement("DIV");

// Get column widths

var rgWidths = new Array();

for (var i = 0; i < this.rows[0].cells.length; i++)

{

rgWidths[i] = this.rows[0].cells[i].offsetWidth;

}

// Add header row

var tbdyHeader = document.createElement("TBODY");

tblHeader.appendChild(tbdyHeader);

tbdyHeader.appendChild(this.rows[0].cloneNode(true));

// Add body rows

var tbdyBody = document.createElement("TBODY");

tblBody.appendChild(tbdyBody);

for (var i = 1; i < this.rows.length; i++)

{

var oRow = this.rows[i].cloneNode(true);

tbdyBody.appendChild(oRow);

}

// Set up body container

divCntr.style.overflow = "auto";

if (this.bodyHeight) divCntr.style.height = this.bodyHeight;

divCntr.appendChild(tblBody);

// Change existing table

for (var i = this.rows.length; i > 0; i--)

{

this.rows[i-1].removeNode(true);

}

var tr1 = this.insertRow();

var td1 = tr1.insertCell();

var tr2 = this.insertRow();

var td2 = tr2.insertCell();

td1.appendChild(tblHeader);

td2.appendChild(divCntr);

// Set column widths of all but the last column

for (var i = 0; i < rgWidths.length - 1; i++)

{

tblHeader.rows[0].cells[i].width = rgWidths[i];

tblBody.rows[0].cells[i].width = rgWidths[i];

}

tblHeader.style.fontSize = "100%";

tblHeader.width = "100%";

tblHeader.style.tableLayout = "fixed";

tblHeader.className = this.headerCSS ? this.headerCSS : "";

tblHeader.border = 0;

tblBody.style.fontSize = "100%";

tblBody.width = "100%";

tblBody.style.tableLayout = "fixed";

tblBody.className = this.bodyCSS ? this.bodyCSS : "";

tblBody.border = 0;

this.cellSpacing = 0;

this.cellPadding = 0;

}

</SCRIPT>