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