横向、纵向固定表头的 HTML Table实现

最近 做了一个可配置的多维表 效果非常不错，可以支持横向、纵向的多重纬度，数据也可以简单绑定，可以支持纬度的分级 如 日期的年月日的级别。还可以加入计算纬度，最终生成HTMLTable.可是，由于表格“面积”太大，网页放不下，拖动时 表头显示不全，所以需要 能横向、纵向固定表头的 HTML Table的实现方法，通过查找觉得以下方法简单实用，但是缺点是只有 IE支持。

< html >
< head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
     < title > 固定表头和列 </ title >
     < script  language ="javascript"  src ="tablefilter.js" ></ script >
     < style > ...
        .FixedTitleRow
        {...}{
            position: relative; 
            top: expression(this.offsetParent.scrollTop); 
            z-index: 10;
            background-color: #E6ECF0;
        }
        
        .FixedTitleColumn
        {...}{
            position: relative; 
            left: expression(this.parentElement.offsetParent.scrollLeft);
        }
        
        .FixedDataColumn
        {...}{
            position: relative;
            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
            background-color: #E6ECF0;
        }
     </ style >
</ head >
< body >
    < div  id ="scrollDiv"  style ="width: 300px; overflow: auto; cursor: default; display: inline;
        position: absolute; height: 200px;" >
         < table  id ='accountTable'  width ='500'  height ='230'  cellpadding ='0'  cellspacing ='0'
             style ='table-layout:  auto' bordercolor ='lightgrey' >
             < tbody >
                 < tr  class ="FixedTitleRow" >
                     < td  class ="FixedTitleColumn" >
                        ID0 </ td >
                     < td  class ="FixedTitleColumn" >
                        CK0 </ td >
                     < td  class ="FixedTitleColumn" >
                        Code0 </ td >
                     < td  class ="FixedTitleColumn" >
                        Descirption0 </ td >
                     < td  class ="FixedTitleColumn" >
                        TOL0 </ td >
                     < td >
                        XS0 </ td >
                     < td  class ="FixedTitleColumn" >
                        SS0 </ td >
                     < td >
                        MS0 </ td >
                     < td >
                        DS0 </ td >
                     < td >
                        BS0 </ td >
                     < td >
                        XL0 </ td >
                     < td >
                        ML0 </ td >
                     < td >
                        DL0 </ td >
                     < td >
                        EM0 </ td >
                     < td >
                        BM0 </ td >
                 </ tr >
                 < tr >
                     < td  class ="FixedDataColumn" >
                        88 </ td >
                     < td  class ="FixedDataColumn" >
                        88 </ td >
                     < td  class ="FixedDataColumn" >
                        88 </ td >
                     < td  class ="FixedDataColumn" >
                        88 </ td >
                     < td  class ="FixedDataColumn" >
                        88 </ td >
                     < td >
                        22 </ td >
                     < td >
                        22 </ td >
                     < td >
                        22 </ td >
                     < td >
                        22 </ td >
                     < td >
                        22 </ td >
                     < td >
                        22 </ td >
                     < td >
                        22 </ td >
                     < td >
                        22 </ td >
                     < td >
                        22 </ td >
                     < td >
                        22 </ td >
                 </ tr >
                 < tr >
                     < td  class ="FixedDataColumn" >
                        111 </ td >
                     < td  class ="FixedDataColumn" >
                        111 </ td >
                     < td  class ="FixedDataColumn" >
                        1111 </ td >
                     < td  class ="FixedDataColumn" >
                        This is Test </ td >
                     < td  class ="FixedDataColumn" >
                        1 </ td >
                     < td >
                        001 </ td >
                     < td >
                        002 </ td >
                     < td >
                        003 </ td >
                     < td >
                        004 </ td >
                     < td >
                        005 </ td >
                     < td >
                        006 </ td >
                     < td >
                        007 </ td >
                     < td >
                        008 </ td >
                     < td >
                        009 </ td >
                     < td >
                        010 </ td >
                 </ tr >
                 < tr >
                     < td  class ="FixedDataColumn" >
                        111 </ td >
                     < td  class ="FixedDataColumn" >
                        111 </ td >
                     < td  class ="FixedDataColumn" >
                        1111 </ td >
                     < td  class ="FixedDataColumn" >
                        This is Test </ td >
                     < td  class ="FixedDataColumn" >
                        1 </ td >
                     < td >
                        001 </ td >
                     < td >
                        002 </ td >
                     < td >
                        003 </ td >
                     < td >
                        004 </ td >
                     < td >
                        005 </ td >
                     < td >
                        006 </ td >
                     < td >
                        007 </ td >
                     < td >
                        008 </ td >
                     < td >
                        009 </ td >
                     < td >
                        010 </ td >
                 </ tr >
                 < tr >
                     < td  class ="FixedDataColumn" >
                        111 </ td >
                     < td  class ="FixedDataColumn" >
                        111 </ td >
                     < td  class ="FixedDataColumn" >
                        1111 </ td >
                     < td  class ="FixedDataColumn" >
                        This is Test </ td >
                     < td  class ="FixedDataColumn" >
                        1 </ td >
                     < td >
                        001 </ td >
                     < td >
                        002 </ td >
                     < td >
                        003 </ td >
                     < td >
                        004 </ td >
                     < td >
                        005 </ td >
                     < td >
                        006 </ td >
                     < td >
                        007 </ td >
                     < td >
                        008 </ td >
                     < td >
                        009 </ td >
                     < td >
                        010 </ td >
                 </ tr >
             </ tbody >
         </ table >
     </ div >

</ body >
</ html >

还有一种封装好的方法 ,但是这种方法不支持纵向表头的固定显示
http://download1.csdn.net/down3/20070607/07064935343.zip

//  Global variables
var  container  =   new  Array();
var  onResizeHandler;

function  scrollbarWidth() ... {
    var w;

    if (! document.body.currentStyle)   document.body.currentStyle = document.body.style;

    if (document.body.currentStyle.overflowY == 'visible' || document.body.currentStyle.overflowY == 'scroll')...{
        w = document.body.offsetWidth - document.body.clientLeft - document.body.clientWidth;
    }else...{
        win = window.open("about:blank", "_blank", "top=0,left=0,width=100,height=100,scrollbars=yes");
        win.document.writeln('scrollbar');
        w = win.document.body.offsetWidth - win.document.body.clientLeft - win.document.body.clientWidth;
        win.close();
    }

    return w;
}

function  getActualWidth(e) ... {
    if (! e.currentStyle)   e.currentStyle = e.style;

    return  e.clientWidth - parseInt(e.currentStyle.paddingLeft) - parseInt(e.currentStyle.paddingRight);
}

function  findRowWidth(r) ... {
    for (var i=0; i < r.length; i++)...{
        r[i].actualWidth = getActualWidth(r[i]);
    }
}

function  setRowWidth(r) ... {
    for (var i=0; i < r.length; i++)...{
        r[i].width = r[i].actualWidth;
        r[i].innerHTML = '<span style="width:' + r[i].actualWidth + ';">' + r[i].innerHTML + '</span>';
    }
}

function  fixTableWidth(tbl) ... {
    for (var i=0; i < tbl.tHead.rows.length; i++)   findRowWidth(tbl.tHead.rows[i].cells);
    findRowWidth(tbl.tBodies[0].rows[0].cells);
    if (tbl.tFoot)  for (var i=0; i < tbl.tFoot.rows.length; i++)   findRowWidth(tbl.tFoot.rows[i].cells);

    //tbl.width = '';

    for (var i=0; i < tbl.tHead.rows.length; i++)   setRowWidth(tbl.tHead.rows[i].cells);
    setRowWidth(tbl.tBodies[0].rows[0].cells);
    if (tbl.tFoot)  for (var i=0; i < tbl.tFoot.rows.length; i++)   setRowWidth(tbl.tFoot.rows[i].cells);
}

function  makeScrollableTable(tbl,scrollFooter,height) ... {
    var c, pNode, hdr, ftr, wrapper, rect;

    if (typeof tbl == 'string') tbl = document.getElementById(tbl);

    pNode = tbl.parentNode;
    fixTableWidth(tbl);

    c = container.length;
    container[c] = document.createElement('<SPAN style="height: 100; overflow: auto;">');
    container[c].id = tbl.id + "Container";
    pNode.insertBefore(container[c], tbl);
    container[c].appendChild(tbl);
    container[c].style.width = tbl.clientWidth + 2 * tbl.clientLeft + scrollbarWidth();

    hdr = tbl.cloneNode(false);
    hdr.id += 'Header';
    hdr.appendChild(tbl.tHead.cloneNode(true));
    tbl.tHead.style.display = 'none';

    if (!scrollFooter || !tbl.tFoot)...{
        ftr = document.createElement('<SPAN style="width:1;height:1;clip: rect(0 1 1 0);background-color:transparent;">');
        ftr.id = tbl.id + 'Footer';
        ftr.style.border = tbl.style.border;
        ftr.style.width = getActualWidth(tbl) + 2 * tbl.clientLeft;
        ftr.style.borderBottom = ftr.style.borderLeft = ftr.style.borderRight = 'none';
    }else...{
        ftr = tbl.cloneNode(false);
        ftr.id += 'Footer';
        ftr.appendChild(tbl.tFoot.cloneNode(true));
        ftr.style.borderTop = 'none';
        tbl.tFoot.style.display = 'none';
    }

    wrapper = document.createElement('<table border=0 cellspacing=0 cellpadding=0>');
    wrapper.id = tbl.id + 'Wrapper';
    pNode.insertBefore(wrapper, container[c]);

    wrapper.insertRow(0).insertCell(0).appendChild(hdr);
    wrapper.insertRow(1).insertCell(0).appendChild(container[c]);
    wrapper.insertRow(2).insertCell(0).appendChild(ftr);

    wrapper.align = tbl.align;
    tbl.align = hdr.align = ftr.align = 'left';
    hdr.style.borderBottom = 'none';
    tbl.style.borderTop = tbl.style.borderBottom = 'none';

    // adjust page size
    if (c == 0 && height == 'auto')...{
        onResizeAdjustTable();
        onResizeHandler = window.onresize;
        window.onresize = onResizeAdjustTable;
    }else...{
        container[c].style.height = height;
    }
}

function  onResizeAdjustTable() ... {
    if (onResizeHandler) onResizeHandler();

    var rect = container[0].getClientRects()(0);
    var h = document.body.clientHeight - (rect.top + (document.body.scrollHeight - rect.bottom));
    container[0].style.height = (h > 0) ? h : 1;
}

function  printPage() ... {
    var tbs = document.getElementsByTagName('TABLE');
    var e;

    for (var i=0; i < container.length; i++)    container[i].style.overflow = '';

    window.print();

    for (var i=0; i < container.length; i++)    container[i].style.overflow = 'auto';
}

 使用方法如下:

< html >
< head >
< script  language =JavaScript  src =ScrollableTable.js ></ script >
</ head >

< body  onload ="makeScrollableTable('tabela',true,'auto');" >

< P  align =center >
< input  type =button  value ="Print"  onclick ="printPage()" >
</ P >

< table  border =0  id =tabela  align =center  style ="border-color: black; border-style: solid; border-width: 1;"  width =300 >
< thead >
< tr >
     < th  bgcolor =blue  style ="color: white"  rowspan =2  valign =bottom > ColA </ th >
     < th  bgcolor =blue  style ="color: white"  colspan =2  align =center > ColBC </ th >
     < th  bgcolor =blue  style ="color: white"  colspan =2  align =center > ColDE </ th >
     < th  bgcolor =blue  style ="color: white"  rowspan =2  valign =bottom > ColF </ th >
</ tr >
< tr >
     < th  bgcolor =blue  style ="color: white" > ColB </ th >
     < th  bgcolor =blue  style ="color: white" > ColC </ th >
     < th  bgcolor =blue  style ="color: white" > ColD </ th >
     < th  bgcolor =blue  style ="color: white" > ColE </ th >
</ tr >
</ thead >
< tbody >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > BBBBBBBBBBBBBBBBBBBBBBBBB </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
< tr >< td > A </ td >< td > B </ td >< td > C </ td >< td > D </ td >< td > E </ td >< td > F </ td ></ tr >
</ tbody >
< tfoot >
< tr >
     < td  bgcolor =blue  style ="color: white"  colspan =6  align =center > Footer </ td >
</ tr >
</ tfoot >
</ table >

< h1  align =right > Some stuff after the table </ h1 >
< h1  align =center > Some stuff after the table </ h1 >
< h1  align =left > Some stuff after the table </ h1 >
</ body >
</ html >