很多用jquery做的表頭固定，列固定；當瀏覽器縮小的時候出現4個導航條

正文:先看程式碼
var superTable = function (tableId, options) {
/////* Initialize */
    options = options || {};
    this.cssSkin = options.cssSkin || "";
    this.headerRows = parseInt(options.headerRows || "1");
    this.fixedCols = parseInt(options.fixedCols || "0");
    this.colWidths = options.colWidths || [];
    this.initFunc = options.onStart || null;
    this.callbackFunc = options.onFinish || null;
    this.initFunc && this.initFunc();
/////* Create the framework dom */
    this.sBase = document.createElement("DIV");
    this.sFHeader = this.sBase.cloneNode(false);
    this.sHeader = this.sBase.cloneNode(false);
    this.sHeaderInner = this.sBase.cloneNode(false);
    this.sFData = this.sBase.cloneNode(false);
    this.sFDataInner = this.sBase.cloneNode(false);
    this.sData = this.sBase.cloneNode(false);
    this.sColGroup = document.createElement("COLGROUP");
    
    this.sDataTable = document.getElementById(tableId);
    this.sDataTable.style.margin = "0px"; /* Otherwise looks bad */
    if (this.cssSkin !== "") {
        this.sDataTable.className += " " + this.cssSkin;
    }
    if (this.sDataTable.getElementsByTagName("COLGROUP").length > 0) {
        this.sDataTable.removeChild(this.sDataTable.getElementsByTagName("COLGROUP")[0]); /* Making our own */
    }
    this.sParent = this.sDataTable.parentNode;
    this.sParentHeight = this.sParent.offsetHeight;
    this.sParentWidth = this.sParent.offsetWidth;
    
/////* Attach the required classNames */
    this.sBase.className = "sBase";
    this.sFHeader.className = "sFHeader";
    this.sHeader.className = "sHeader";
    this.sHeaderInner.className = "sHeaderInner";
    this.sFData.className = "sFData";
    this.sFDataInner.className = "sFDataInner";
    this.sData.className = "sData";
    
/////* Clone parts of the data table for the new header table */
    var alpha, beta, touched, clean, cleanRow, i, j, k, m, n, p;
    this.sHeaderTable = this.sDataTable.cloneNode(false);
    if (this.sDataTable.tHead) {
        alpha = this.sDataTable.tHead;
        this.sHeaderTable.appendChild(alpha.cloneNode(false));
        beta = this.sHeaderTable.tHead;
    } else {
        alpha = this.sDataTable.tBodies[0];
        this.sHeaderTable.appendChild(alpha.cloneNode(false));
        beta = this.sHeaderTable.tBodies[0];
    }
    alpha = alpha.rows;
    for (i=0; i<this.headerRows; i++) {
        beta.appendChild(alpha[i].cloneNode(true));
    }
    this.sHeaderInner.appendChild(this.sHeaderTable);
    
    if (this.fixedCols > 0) {
        this.sFHeaderTable = this.sHeaderTable.cloneNode(true);
        this.sFHeader.appendChild(this.sFHeaderTable);
        this.sFDataTable = this.sDataTable.cloneNode(true);
        this.sFDataInner.appendChild(this.sFDataTable);
    }
    
/////* Set up the colGroup */
    alpha = this.sDataTable.tBodies[0].rows;
    for (i=0, j=alpha.length; i<j; i++) {
        clean = true;
        for (k=0, m=alpha[i].cells.length; k<m; k++) {
            if (alpha[i].cells[k].colSpan !== 1 || alpha[i].cells[k].rowSpan !== 1) {
                i += alpha[i].cells[k].rowSpan - 1;
                clean = false;
                break;
            }
        }
        if (clean === true) break; /* A row with no cells of colSpan > 1 || rowSpan > 1 has been found */
    }
    cleanRow = (clean === true) ? i : 0; /* Use this row index to calculate the column widths */
    for (i=0, j=alpha[cleanRow].cells.length; i<j; i++) {
        if (i === this.colWidths.length || this.colWidths[i] === -1) {
            this.colWidths[i] = alpha[cleanRow].cells[i].offsetWidth;
        }
    }
    for (i=0, j=this.colWidths.length; i<j; i++) {
        this.sColGroup.appendChild(document.createElement("COL"));
        this.sColGroup.lastChild.setAttribute("width", this.colWidths[i]);
    }
    this.sDataTable.insertBefore(this.sColGroup.cloneNode(true), this.sDataTable.firstChild);
    this.sHeaderTable.insertBefore(this.sColGroup.cloneNode(true), this.sHeaderTable.firstChild);
    if (this.fixedCols > 0) {
        this.sFDataTable.insertBefore(this.sColGroup.cloneNode(true), this.sFDataTable.firstChild);
        this.sFHeaderTable.insertBefore(this.sColGroup.cloneNode(true), this.sFHeaderTable.firstChild);
    }
    
/////* Style the tables individually if applicable */
    if (this.cssSkin !== "") {
        this.sDataTable.className += " " + this.cssSkin + "-Main";
        this.sHeaderTable.className += " " + this.cssSkin + "-Headers";
        if (this.fixedCols > 0) {
            this.sFDataTable.className += " " + this.cssSkin + "-Fixed";
            this.sFHeaderTable.className += " " + this.cssSkin + "-FixedHeaders";
        }
    }
    
/////* Throw everything into sBase */
    if (this.fixedCols > 0) {
        this.sBase.appendChild(this.sFHeader);
    }
    this.sHeader.appendChild(this.sHeaderInner);
    this.sBase.appendChild(this.sHeader);
    if (this.fixedCols > 0) {
        this.sFData.appendChild(this.sFDataInner);
        this.sBase.appendChild(this.sFData);
    }
    this.sBase.appendChild(this.sData);
    this.sParent.insertBefore(this.sBase, this.sDataTable);
    this.sData.appendChild(this.sDataTable);
    
/////* Align the tables */
    var sDataStyles, sDataTableStyles;
    this.sHeaderHeight = this.sDataTable.tBodies[0].rows[(this.sDataTable.tHead) ? 0 : this.headerRows].offsetTop;
    sDataTableStyles = "margin-top: " + (this.sHeaderHeight * -1) + "px;";
    sDataStyles = "margin-top: " + this.sHeaderHeight + "px;";
    sDataStyles += "height: " + (this.sParentHeight - this.sHeaderHeight) + "px;";
    if (this.fixedCols > 0) {        
        /* A collapsed table's cell's offsetLeft is calculated differently (w/ or w/out border included) across broswers - adjust: */
        this.sFHeaderWidth = this.sDataTable.tBodies[0].rows[cleanRow].cells[this.fixedCols].offsetLeft;
        if (window.getComputedStyle) {
            alpha = document.defaultView;
            beta = this.sDataTable.tBodies[0].rows[0].cells[0];
            if (navigator.taintEnabled) { /* If not Safari */
                this.sFHeaderWidth += Math.ceil(parseInt(alpha.getComputedStyle(beta, null).getPropertyValue("border-right-width")) / 2);
            } else {
                this.sFHeaderWidth += parseInt(alpha.getComputedStyle(beta, null).getPropertyValue("border-right-width"));
            }
        } else if (/*@

[email protected]*/0) { /* Internet Explorer */
            alpha = this.sDataTable.tBodies[0].rows[0].cells[0];
            beta = [alpha.currentStyle["borderRightWidth"], alpha.currentStyle["borderLeftWidth"]];
            if(/px/i.test(beta[0]) && /px/i.test(beta[1])) {
                beta = [parseInt(beta[0]), parseInt(beta[1])].sort();
                this.sFHeaderWidth += Math.ceil(parseInt(beta[1]) / 2);
            }
        }
        
        /* Opera 9.5 issue - a sizeable data table may cause the document scrollbars to appear without this: */
        if (window.opera) {
            this.sFData.style.height = this.sParentHeight + "px";
        }
        
        this.sFHeader.style.width = this.sFHeaderWidth + "px";
        sDataTableStyles += "margin-left: " + (this.sFHeaderWidth * -1) + "px;";
        sDataStyles += "margin-left: " + this.sFHeaderWidth + "px;";
        sDataStyles += "width: " + (this.sParentWidth - this.sFHeaderWidth) + "px;";
    } else {
        sDataStyles += "width: " + this.sParentWidth + "px;";
    }
    this.sData.style.cssText = sDataStyles;
    this.sDataTable.style.cssText = sDataTableStyles;
    
/////* Set up table scrolling and IE's onunload event for garbage collection */
    (function (st) {
        if (st.fixedCols > 0) {
            st.sData.onscroll = function () {
                st.sHeaderInner.style.right = st.sData.scrollLeft + "px";
                st.sFDataInner.style.top = (st.sData.scrollTop * -1) + "px";
            };
        } else {
            st.sData.onscroll = function () {
                st.sHeaderInner.style.right = st.sData.scrollLeft + "px";
            };
        }
        if (/*@

[email protected]*/0) { /* Internet Explorer */
            window.attachEvent("onunload", function () {
                st.sData.onscroll = null;
                st = null;
            });
        }
    })(this);
    
    this.callbackFunc && this.callbackFunc();
};

(function($) {
    $.fn.extend(
            {
                toSuperTable: function(options) {
                    var setting = $.extend(
                    {
                        width: "640px", height: "320px",
                        margin: "10px", padding: "0px",
                        overflow: "hidden", colWidths: undefined,
                        fixedCols: 0, headerRows: 1,
                        onStart: function() { },
                        onFinish: function() { },
                        cssSkin: "sSky"
                    }, options);

                    return this.each(function() {
                        var q = $(this);
                        var id = q.attr("id");
                        q.removeAttr("style").wrap("<div id='" + id + "_box'></div>");
                        var nonCssProps = ["fixedCols", "headerRows", "onStart", "onFinish", "cssSkin", "colWidths"];
                        var container = $("#" + id + "_box");
                        for (var p in setting) {
                            if ($.inArray(p, nonCssProps) == -1) {
                                container.css(p, setting[p]);
                                delete setting[p];
                            }
                        }
                        var mySt = new superTable(id, setting);
                    });
                }
            });
})(jQuery);

看的眼花繚亂，這個不要去看。到時候直接呼叫就Ok了

看看我更改的css樣式，怎麼設定

/*
/////////////////////////////////////////////////////////////////////////////////////////
// Super Tables v0.30 - MIT Style License
// Copyright (c) 2008 Matt Murphy --- www.matts411.com
// cssSkin：表格的樣式。目前有：sDefault，sSky，sOrange，sDark，可以通過修改superTables.css自定義樣式

// Contributors:
// Joe Gallo
/////////////////////////////////////////////////////////////////////////////////////////
*/

.fakeContainer {
     margin: 0px;
    padding: 0px;
    border: none;
   /* width: 1410px;
    height: 550px;*/
    overflow: hidden;
}

.sBase {
position: relative;
    width: 100%;
    height: 70%;
    overflow: hidden;
}
/* HEADERS */
.sHeader {
position: absolute;
z-index: 3;
background-color: #ffffff;
}
.sHeaderInner {
position: relative;
}
.sHeaderInner table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
background-color: #ffffff; /* Here b/c of Opera 9.25 :( */
}
/* HEADERS - FIXED */
.sFHeader {
position: absolute;
z-index: 4;
overflow: hidden;
}
.sFHeader table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
background-color: #ffffff; /* Here b/c of Opera 9.25 :( */
}
/* BODY */
.sData {
position: absolute;
z-index: 2;
overflow: auto;
background-color: #ffffff;
height: 90%;
}
.sData table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
}
/* BODY - FIXED */
.sFData {
position: absolute;
z-index: 1;
background-color: #ffffff;
}
.sFDataInner {
position: relative;
}
.sFData table {
border-spacing: 0px 0px !important;
border-collapse: collapse !important;
width: 1px !important;
table-layout: fixed !important;
}

/*
/////////////////////////////////////////////////////////////////////////////////////////
// Super Tables - Skin Classes
// Remove if not needed
/////////////////////////////////////////////////////////////////////////////////////////
*/
/* sDefault */
.sDefault {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
}
.sDefault th, .sDefault td {
border: 1px solid #cccccc;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sDefault th {
background-color: #e5e5e5;
border-color: #c5c5c5;
}
.sDefault-Fixed {
background-color: #eeeeee;
border-color: #c5c5c5;
}
/* sSky */
.sSky {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
}
.sSky th, .sSky td {
border: 1px solid #9eb6ce;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sSky th {
background-color: #CFDCEE;
}
.sSky-Fixed {
background-color: #e4ecf7;
}
/* sOrange */
.sOrange {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
}
.sOrange th, .sOrange td {
border: 1px solid #cebb9e;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sOrange th {
background-color: #ECD8C7;
}
.sOrange-Fixed {
background-color: #f7ede4;
}
/* sDark */
.sDark {
margin: 0px;
padding: 0px;
border: none;
font-family: Verdana, Arial, sans serif;
font-size: 0.8em;
color: #ffffff;
}
.sDark th, .sDark td {
border: 1px solid #555555;
padding: 3px 6px 3px 4px;
white-space: nowrap;
}
.sDark th {
background-color: #000000;
}
.sDark-Fixed {
background-color: #222222;
}
.sDark-Main {
background-color: #333333;
}
/*person add*/
.rowStyle
{
    background-color: #FFFFFF;
}
.alterStyle
{
    background-color: #ddddff;
}
這個不管，這個外掛注意的幾個地方，同jquery，追加了幾個div，這個可以用ie瀏覽器F12檢視，追加了幾個div，

要注意的div，第一個div的class為sBase(是要顯示資料的div)，正文css已經設定好了，我這裡設定的是70%(看個人)，看第二個div的class是sFHeader，這個高度和寬度是jquery，自動計算的。這裡的意思就我們固定列寬度的大小；這個我們不管它，還有個就是sDate了，圖示：

介紹完了，接下來改怎麼設定導航條：首先4個導航條，最外面的導航條是body的。好我們關了它style="overflow:hidden;"，然後跟我上面提供的css預設設定；接著然後我們設定sDate，用百分比。就是用sBase的寬度減去sFheader的寬度，然後sBase的高度，就是sBase的高度減去sDate這個div導航條的高度大概22px，這個根據個人除錯設定。看程式碼：

<% if(list.size()>0){%>
<script type="text/javascript">
(function() {
new superTable("demoTable", {cssSkin:"sDefault",fixedCols:4,headerRows:1});
//this.sData.style.height="100%";
var sfHeader_width= $('.sFHeader').width();
var sBase_width=$('.sBase').width();
var sDate_width=sBase_width-sfHeader_width;
//$('.sData').css({"width":sDate_width, "height":"95.5%"});
//$('.sDataTable').css({"width":"80%", "height":"55%"});
var sfHeader_height= $('.sBase').height();
var sFData_height= $('.sFData').height();
var sFHeader_h =$('.sFHeader').height();
var sDate_height=0;
if(sFData_height>sfHeader_height){
    sDate_height=sfHeader_height-22;
    $('.sData').css({"width":sDate_width, "height": sDate_height});
}
if(sFData_height<sfHeader_height){
    sDate_height=sFData_height;
    $('.sData table').css({"margin-top":"0px"});
    $('.sData').css({"width":sDate_width, "height": sDate_height+20,"margin-top":"0px"});
}

})();

$(window).resize(function(){
     sfHeader_width= $('.sFHeader').width();
     sBase_width=$('.sBase').width();
     sDate_width=sBase_width-sfHeader_width;

      sfHeader_height= $('.sBase').height();
      sFData_height= $('.sFData').height();
      sFHeader_h =$('.sFHeader').height();
      sDate_height=0;

      if(sFData_height>sfHeader_height){
          sDate_height=sfHeader_height-22;
          $('.sData').css({"width":sDate_width, "height": sDate_height});
      }
      if(sFData_height<sfHeader_height){
          sDate_height=sFData_height;
          $('.sData table').css({"margin-top":"0px"});
          $('.sData').css({"width":sDate_width, "height": sDate_height+20,"margin-top":"0px"});
      }
});
</script>
<%}%>

好了這樣就可以了。要是不懂，找個美工調調把。

下載檔案：http://download.csdn.net/detail/wang1989cs/8225201