html table 固定表頭和列

/****************************************************************
 
jQuery 插件.
 
功能: 固定表格標題行或列頭
 
Version: 1.0
 
調用方法:
$('#myTable').fixTable(
    pRow, //可滾動區域第一行的行號
    pCol, //可滾動區域第一列的列號
    splitColor, //(可選)固定區域與滾動區域的分隔線顏色
);
 
 
****************************************************************/

jQuery.fn.extend({
    fixTable: function (pRow, pCol, splitColor) {
        //滾動條寬度
        var scrW = 16;

        //設置分隔線顏色
        if (!splitColor) {
            splitColor = '#333';
        }

        //得到表格本身
        var t = $(this);
        var pid = 'fixbox_' + t.attr('id');

        t.show();

        //得到表格實際大小
        var tw = t.outerWidth(true);
        var th = t.outerHeight(true);

        //在外部包一個DIV,用來獲取允許顯示區域大小
        t.wrap("<div id='" + pid + "' ></div>");
        var p = $('#' + pid);
        p.css({
            width: '100%',
            height: '100%',
            border: '0px',
            margin: '0 0 0 0',
            padding: '0 0 0 0'
        });

        //允許顯示區域大小
        t.hide();
        var cw = p.outerWidth(true);
        var ch = p.outerHeight(true);
        t.show();

        //拿到表格的HTML代碼
        var thtml = p.html();

        //判斷是否需要固定行列頭
        if (tw <= cw && th <= ch) {
            return;
        }
        //判斷需要固定行/列/行列
        var fixType = 4;    //全固定
        if (tw <= cw - scrW) {    //寬度夠, 高度不夠
            fixType = 1;    //行固定
            cw = tw + scrW;
        } else if (th <= ch - scrW) {    //高度夠, 寬度不夠
            fixType = 2;    //列固定
            ch = th + scrW;
        }
        //固定單元格的位置
        var w1 = 0;
        var h1 = 0;

        var post = t.offset();

        var p1, p2, p3, p4;
        if (fixType == 4) {    //行頭列頭都需固定
            //取出指定行列單元格左上角的位置,單位px
            var pos = t.find('tr').eq(pRow).find('td').eq(pCol).offset();

            w1 = pos.left - post.left;
            h1 = pos.top - post.top;

            var tmp = '<table style="background: #ECE9D8;" ';
            tmp += 'border="0" cellspacing="0" cellpadding="0">';
            tmp += '<tr><td style="border-right: 1px solid ' + splitColor +
                ';border-bottom: 1px solid ' + splitColor + '">';
            tmp += '<div id="' + pid + '1"></div></td>';
            tmp += '<td style="border-bottom: 1px solid ' + splitColor +
                ';"><div id="' + pid + '2"></div></td></tr>';
            tmp += '<tr><td valign="top" style="border-right: 1px solid ' +
                splitColor + ';"><div id="' + pid + '3"></div></td>';
            tmp += '<td><div id="' + pid + '4"></div></td></tr>';
            tmp += '</table>';

            p.before(tmp);

            $('div[id^=' + pid + ']').each(function () {
                $(this).css({
                    background: 'white',
                    overflow: 'hidden',
                    margin: '0 0 0 0',
                    padding: '0 0 0 0',
                    border: '0'
                });
            });
            p1 = $('#' + pid + '1');
            p2 = $('#' + pid + '2');
            p3 = $('#' + pid + '3');
            p4 = $('#' + pid + '4');

            //左上角方塊
            p1.html(thtml).css({ width: w1 - 1, height: h1 - 1 });
            p1.find('table:first').attr('id', undefined);

            //右上方塊
            p2.html(thtml).css({ width: cw - w1 - scrW, height: h1 - 1 });
            p2.find('table:first').css({
                position: 'relative',
                left: -w1
            }).attr('id', undefined);

            //左下方塊
            p3.html(thtml).css({ width: w1 - 1, height: ch - h1 - scrW });
            p3.find('table:first').css({
                position: 'relative',
                top: -h1
            }).attr('id', undefined);

            //主方塊
            p4.append(p).css({
                width: cw - w1,
                height: ch - h1,
                overflow: 'auto'
            });

            t.css({
                position: 'relative',
                top: -h1,
                left: -w1
            });

            p.css({ width: tw - w1, height: th - h1, overflow: 'hidden' });

            p4.scroll(function () {
                p2.scrollLeft($(this).scrollLeft());
                p3.scrollTop($(this).scrollTop());
            });
        } else if (fixType == 1) {    //只需固定行頭
            var pos = t.find('tr').eq(pRow).find('td').first().offset();
            h1 = pos.top - post.top;

            var tmp = '<table style="background: #ECE9D8;" ';
            tmp += 'border="0" cellspacing="0" cellpadding="0">';
            tmp += '<tr><td style="border-bottom: 1px solid ' + splitColor + '">';
            tmp += '<div id="' + pid + '1"></div></td></tr>';
            tmp += '<tr><td><div id="' + pid + '2"></div></td></tr>';
            tmp += '</table>';

            p.before(tmp);

            $('div[id^=' + pid + ']').each(function () {
                $(this).css({
                    background: 'white',
                    overflow: 'hidden',
                    margin: '0 0 0 0',
                    padding: '0 0 0 0',
                    border: '0'
                });
            });
            p1 = $('#' + pid + '1');
            p2 = $('#' + pid + '2');
            //上方方塊
            p1.html(thtml).css({ width: tw, height: h1 - 1 });
            p1.find('table:first').attr('id', undefined);

            //主方塊
            p2.append(p).css({
                width: cw + 1,
                height: ch - h1,
                overflow: 'auto'
            });

            t.css({
                position: 'relative',
                top: -h1,
                left: 0
            });

            p.css({ width: tw, height: th - h1, overflow: 'hidden' });
        } else if (fixType == 2) {    //只需固定列頭
            var pos = t.find('tr').first().find('td').eq(pCol).offset();
            w1 = pos.left - post.left;

            var tmp = '<table style="background: #ECE9D8;" ';
            tmp += 'border="0" cellspacing="0" cellpadding="0">';
            tmp += '<tr><td valign="top" style="border-right: 1px solid ' + splitColor + '">';
            tmp += '<div id="' + pid + '1"></div></td>';
            tmp += '<td><div id="' + pid + '2"></div></td></tr>';
            tmp += '</table>';

            p.before(tmp);

            $('div[id^=' + pid + ']').each(function () {
                $(this).css({
                    background: 'white',
                    overflow: 'hidden',
                    margin: '0 0 0 0',
                    padding: '0 0 0 0',
                    border: '0'
                });
            });
            p1 = $('#' + pid + '1');
            p2 = $('#' + pid + '2');
            //上方方塊
            p1.html(thtml).css({ width: w1 - 1, height: th });
            p1.find('table:first').attr('id', undefined);

            //主方塊
            p2.append(p).css({
                width: cw - w1,
                height: ch + 1,
                overflow: 'auto'
            });

            t.css({
                position: 'relative',
                top: 0,
                left: -w1
            });

            p.css({ width: tw - w1, height: th, overflow: 'hidden' });
        }
    }
});

轉自：http://bbs.csdn.net/topics/330147945