51

我需要在网页上显示一个大表格，并且需要防止第一列和第一行滚动。 我想动态设置此表的垂直大小（在一些静态大小的页眉/页脚页面内容之间），以使其尽可能高，而不强制浏览器窗口具有垂直滚动条。

   browser window\/
+--------------------------------------------------------------+  /\
|   /\     /\  /\         /\       /\      /\     /\ /\        |  fixed static
|    web page header fields and text                           |  |  size
|   \/    \/   \/         \/       \/     \/     \/   \/       |__\/__
|               +----<<<table-scrollbar>>>>>----------------+  |  /\
|+--------------+--------+--------+--------+--------+-------+  |   |
||              |        |colspan |        |        | fixed |  |   |
||  fixed       |  fixed |  fixed | fixed  |  fixed | more> |  |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------++ |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       || |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+t |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       |a |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+b |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       |l |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+e |   set
||  fixed       |  |  |  |   |    |  |  |  |        |       || |   dynamic
||  multi-line  |  |  |  |   |    |  |  |  |        |       |s |   size at
|+--------------+--+--+--+---+----+--+--+--+--------+-------+c |   runtime
||  fixed       |  |  |  |   |    |  |  |  |        |       |r |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+o |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       |l |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+l |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       |b |   |
||              |  |  |  |   |    |  |  |  |        |       |a 
|+--------------+--+--+--+---+----+--+--+--+--------+-------+r |   |
|| fixed, moreV |  |  |  |   |    |  |  |  |        |       || |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------++ |__\/__
|   /\     /\  /\         /\       /\      /\     /\ /\        |  /\
|    web page footer fields and text                           |  fixed static
|   \/    \/   \/         \/       \/     \/     \/   \/       |  |  size
+--------------------------------------------------------------+  \/

这只需要在现代浏览器中工作，使用 all/any: html, css, javascript, jquery

重要性顺序：

  • 具有许多表单字段、隐藏值、javascript 行折叠等的复杂表，稍后我将添加
  • 第一行将有 colspans
  • 行将具有可变高度
  • 第一行：从垂直滚动固定，但可以水平滚动
  • 第一列：从水平滚动固定，但可以垂直滚动
  • 动态调整此“表格”的大小以填充静态大小的页眉/页脚 html 之间的屏幕
  • 滚动条的位置（如上面我很棒的 ascii 艺术中所描绘的）并不重要。

这是一个非常基本的屏幕 html 示例，没有任何滚动/调整大小功能：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>big scrolling table example</TITLE>
</HEAD>

<BODY>
  <form name="MyForm" method="POST" action="">
    <!-- static size header junk--><!-- static size header junk--><!-- static size header junk-->
    <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td width="35%" align="left">header junk left</td>
    <td >- HEADER JUNK MIDDLE -</td>
    <td width="35%" align="right">header junk right</td>
    </tr>
    </table>
    <br>
    <table border="0" width="95%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td width="60%" align="left">header junk left</td>
    <td width="40%" align="right">check it out! <input type="checkbox" onchange="alert('your javascript here');" value="Y" name="checkitout"></td>
    </tr>


    <!-- big table here!!--><!-- big table here!!--><!-- big table here!!--><!-- big table here!!-->

    <table border="1" width="95%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td>fixed can be long<br>or short</td>
    <td colspan="4">scroll A</td>
    <td colspan="2">scroll B</td>
    <td >scroll C</td>
    <td colspan="4">scroll D</td>
    <td colspan="2">scroll E</td>
    <td >scroll F</td>
    <td colspan="4">scroll G</td>
    <td colspan="2">scroll H</td>
    <td >scroll I</td>
    <td colspan="4">scroll J</td>
    <td colspan="2">scroll K</td>
    <td >scroll L</td>
    <td colspan="4">scroll M</td>
    <td colspan="2">scroll N</td>
    <td >scroll O</td>
    </tr>

    <tr>
        <td>fixed 2</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>
    <tr>
        <td>fixed 3</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>
    <tr>
        <td>fixed 4</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...<br>more...<br>more...<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>
    <tr>
        <td>fixed 5</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H<br>H<br>H<br>H<br>H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>
    <tr>
        <td>fixed 6<br>6<br>6<br>6</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>

    </table>


    <!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk-->
    <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td width="35%" align="left">footer junk left</td>
    <td >- FOOTER JUNK MIDDLE -</td>
    <td width="35%" align="right">footer junk right</td>
    </tr>

  </form>
</BODY>
</HTML>
4

6 回答 6

35

编辑 5： - 添加了可配置的固定行和列。- 修复了列宽和高度问题 - 减少了复杂选择器的使用

用法：

    $('#cTable').cTable({
        width: 1300,  
        height: 500,  
        fCols: 2,
        fRows: 2
    });

演示： http: //jsfiddle.net/rCuPf/7/embedded/result/（更新演示）

编辑 4：更新了第 1 列的 colSpan。演示：http: //jsfiddle.net/skram/rKjk3/26/

编辑 3：做了一些清理和一些修复：http: //jsfiddle.net/rKjk3/22在 IE9、FF 和 Chrome 中测试。（我现在没有最新的IE来测试它）

编辑 2：修复 IE： http: //jsfiddle.net/rKjk3/15/embedded/result/（参见上面的最新版本）

编辑 1：修复调整窗口大小http://jsfiddle.net/rKjk3/11/（参见上面的最新版本）

  • 添加了 window.resize 事件处理程序来设置宽度，rightContainer因此实际表格的宽度将随着您调整大小而增加。
  • 去掉了固定宽度，SBWrapper以便充分利用容器内的可用空间。

我为您的要求创建了 2 个演示。

  1. 示例以显示使用简单标记结构呈现的 html 的外观。这将允许您查看正在呈现的结构及其工作方式:)
    演示：http: //jsfiddle.net/GmJ22/7/

  2. 带有您发布的标记的实际演示。该代码只是一个粗略的版本，可能需要进行一些清理。现在您可以配置表格的宽度和高度。我发布它，以便您可以查看并给我一些反馈。
    演示： http: //jsfiddle.net/rKjk3/10/embedded/result/（见下面的固定版本）

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD>
<TITLE>big scrolling table example</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(function() {
        $.fn.cTable = function(o) {        

            this.wrap('<div class="cTContainer" />');
            this.wrap('<div class="relativeContainer" />');    
            //Update below template as how you have it in orig table
            var origTableTmpl = '<table border="1" cellspacing="1" cellpadding="0" align="center" width="95%" ></table>';            
            //get row 1 and clone it for creating sub tables
            var row1 = this.find('tr').slice(0, o.fRows).clone();

            var r1c1ColSpan = 0;
            for (var i = 0; i < o.fCols; i++ ) {
                r1c1ColSpan += this[0].rows[0].cells[i].colSpan;
            }

            //create table with just r1c1 which is fixed for both scrolls
            var tr1c1 = $(origTableTmpl);
            row1.each(function () {            
                var tdct = 0;
                $(this).find('td').filter( function () {
                    tdct += this.colSpan;
                    return tdct > r1c1ColSpan;
                }).remove();                
            });
            row1.appendTo(tr1c1);
            tr1c1.wrap('<div class="fixedTB" />');
            tr1c1.parent().prependTo(this.closest('.relativeContainer'));

            //create a table with just c1        
            var c1= this.clone().prop({'id': ''});
            c1.find('tr').slice(0, o.fRows).remove();
            c1.find('tr').each(function (idx) {
                var c = 0;
                $(this).find('td').filter(function () {
                    c += this.colSpan;
                    return c > r1c1ColSpan;
                }).remove();           
            });

            var prependRow = row1.first().clone();
            prependRow.find('td').empty();
            c1.prepend(prependRow).wrap('<div class="leftSBWrapper" />')
            c1.parent().wrap('<div class="leftContainer" />');            
            c1.closest('.leftContainer').insertAfter('.fixedTB');

            //create table with just row 1 without col 1
            var r1 = $(origTableTmpl);
            row1 = this.find('tr').slice(0, o.fRows).clone();
            row1.each(function () {
                var tds = $(this).find('td'), tdct = 0;
                tds.filter (function () {
                    tdct += this.colSpan;
                    return tdct <= r1c1ColSpan;
                }).remove();
            });
            row1.appendTo(r1);
            r1.wrap('<div class="topSBWrapper" />')
            r1.parent().wrap('<div class="rightContainer" />')  
            r1.closest('.rightContainer').appendTo('.relativeContainer');

            $('.relativeContainer').css({'width': 'auto', 'height': o.height});

            this.wrap('<div class="SBWrapper"> /')        
            this.parent().appendTo('.rightContainer');    
            this.prop({'width': o.width});    

            var tw = 0;
            //set width and height of rendered tables
            for (var i = 0; i < o.fCols; i++) {
                tw += $(this[0].rows[0].cells[i]).outerWidth(true);
            }
            tr1c1.width(tw);
            c1.width(tw);

            $('.rightContainer').css('left', tr1c1.outerWidth(true));

            for (var i = 0; i < o.fRows; i++) {
                var tr1c1Ht = $(c1[0].rows[i]).outerHeight(true);
                var thisHt = $(this[0].rows[i]).outerHeight(true);
                var finHt = (tr1c1Ht > thisHt)?tr1c1Ht:thisHt;
                $(tr1c1[0].rows[i]).height(finHt);
                $(r1[0].rows[i]).height(finHt);
            }
            $('.leftContainer').css({'top': tr1c1.outerHeight(true), 'width': tr1c1.outerWidth(true)});

            var rtw = $('.relativeContainer').width() - tw;
            $('.rightContainer').css({'width' : rtw, 'height': o.height, 'max-width': o.width - tw});    

            var trs = this.find('tr');
            trs.slice(1, o.fRows).remove();
            trs.slice(0, 1).find('td').empty();
            trs.each(function () {
                var c = 0;
                $(this).find('td').filter(function () {
                    c += this.colSpan;
                    return c <= r1c1ColSpan;
                }).remove();
            });

            r1.width(this.outerWidth(true));

            for (var i = 1; i < c1[0].rows.length; i++) {
                var c1Ht = $(c1[0].rows[i]).outerHeight(true);
                var thisHt = $(this[0].rows[i]).outerHeight(true);
                var finHt = (c1Ht > thisHt)?c1Ht:thisHt;
                $(c1[0].rows[i]).height(finHt);
                $(this[0].rows[i]).height(finHt);
            }

            $('.SBWrapper').css({'height': $('.relativeContainer').height() - $('.topSBWrapper').height()});            

            $('.SBWrapper').scroll(function () {
                var rc = $(this).closest('.relativeContainer');
                var lfW = rc.find('.leftSBWrapper');
                var tpW = rc.find('.topSBWrapper');

                lfW.css('top', ($(this).scrollTop()*-1));
                tpW.css('left', ($(this).scrollLeft()*-1));        
            });

            $(window).resize(function () {
                $('.rightContainer').width(function () {
                    return $(this).closest('.relativeContainer').outerWidth() - $(this).siblings('.leftContainer').outerWidth();
                });

            });
        }

        $('#cTable').cTable({
            width: 1300,
            height: 500,
            fCols: 2,
            fRows: 2
        });
    });
</script>
<style>
    .cTContainer { overflow: hidden; padding: 2px; }
    .cTContainer table { table-layout: fixed; }
    .relativeContainer { position: relative; overflow: hidden;}    
    .fixedTB { position: absolute; z-index: 11;  }
    .leftContainer { position: absolute; overflow: hidden;  }
    .rightContainer { position: absolute; overflow: hidden;  }
    .leftSBWrapper { position: relative; z-index: 10; }
    .topSBWrapper { position: relative; z-index: 10; width: 100%; }
    .SBWrapper { width: 100%; overflow: auto; }

    td { background-color: white; overflow: hidden; padding: 1px; }    
</style>
</HEAD>
<BODY>
  <form name="MyForm" method="POST" action="">
    <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
        <tr>
        <td width="35%" align="left">header junk left</td>
        <td >- HEADER JUNK MIDDLE -</td>
        <td width="35%" align="right">header junk right</td>
        </tr>
    </table>
    <br />
    <table border="0" width="95%" cellspacing="1" cellpadding="0" align="center">
        <tr>
        <td width="60%" align="left">header junk left</td>
        <td width="40%" align="right">check it out! <input type="checkbox" onchange="alert('your javascript here');" value="Y" name="checkitout"></td>
        </tr>
    </table>

    <!-- big table here!!--><!-- big table here!!--><!-- big table here!!--><!-- big table here!!-->
    <table border="1" width="95%" cellspacing="1" cellpadding="0" align="center" id="cTable" >
        <tr>
            <td width="5%" colspan="3">fixed can be long<br>or short</td>
            <td width="9%" colspan="4">scroll A</td>
            <td width="7%" colspan="2">scroll B</td>
            <td width="3%">scroll C</td>
            <td width="9%" colspan="4">scroll D</td>
            <td width="7%" colspan="2">scroll E</td>
            <td width="3%">scroll F</td>
            <td width="9%" colspan="4">scroll G</td>
            <td width="7%" colspan="2">scroll H</td>
            <td width="3%">scroll I</td>
            <td width="9%" colspan="4">scroll J</td>
            <td width="7%" colspan="2">scroll K</td>
            <td width="3%">scroll L</td>
            <td width="9%" colspan="4">scroll M</td>
            <td width="7%" colspan="2">scroll N</td>
            <td width="3%">scroll O</td>
        </tr>
        <tr>
            <td width="5%" colspan="3">2nd fixed header</td>
            <td width="9%" colspan="4">scroll 2A</td>
            <td width="7%">scroll 2B-1</td>
            <td width="7%">scroll 2B-2 </td>
            <td width="3%">scroll 2C</td>
            <td width="9%" colspan="4">scroll 2D</td>
            <td width="7%" colspan="2">scroll 2E</td>
            <td width="3%">scroll 2F</td>
            <td width="9%" colspan="4">scroll 2G</td>
            <td width="7%" colspan="2">scroll 2H</td>
            <td width="3%">scroll 2I</td>
            <td width="9%" colspan="4">scroll 2J</td>
            <td width="7%" colspan="2">scroll 2K</td>
            <td width="3%">scroll 2L</td>
            <td width="9%" colspan="4">scroll 2M</td>
            <td width="7%" colspan="2">scroll 2N</td>
            <td width="3%">scroll 2O</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>1 1 1 1 1 A</td>
            <td>2 2 2 2 2 A</td>
            <td>3 3 3 3 3 A</td>
            <td>4 4 4 4 4 A</td>
            <td>1 B</td>
            <td>2 B</td>
            <td >1 C</td>
            <td>1 D</td>
            <td>2 D</td>
            <td>3 D</td>
            <td>4 D<br>more...</td>
            <td>1 E</td>
            <td>2 E</td>
            <td >1 F</td>
            <td>1 1 1 G</td>
            <td>2 2 G</td>
            <td>3 G</td>
            <td>4 4 4 4 G</td>
            <td>1 H</td>
            <td>222 H</td>
            <td >1 I</td>
            <td>1 J</td>
            <td>2 J</td>
            <td>3 J</td>
            <td>4 J</td>
            <td>1 K</td>
            <td>2 2 K<br>more..<br>more..</td>
            <td >1 L</td>
            <td>1 M</td>
            <td>22 M</td>
            <td>333 M</td>
            <td>4444 M</td>
            <td>1 N</td>
            <td>2 N</td>
            <td >1 1 1 1 1 1 1 O</td>
        </tr>
        <tr>
            <td colspan="2">fixed 3</td>
            <td>3</td>
            <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
            <td>1 B</td><td>2 B</td>
            <td >1 C</td>
            <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
            <td>1 E</td><td>2 E</td>
            <td >1 F</td>
            <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
            <td>1 H</td><td>222 H</td>
            <td >1 I</td>
            <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
            <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
            <td >1 L</td>
            <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
            <td>1 N</td><td>2 N</td>
            <td >1 1 1 1 1 1 1 O</td>
        </tr>
        <tr>
            <td colspan="3">fixed 4</td>
            <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
            <td>1 B</td><td>2 B</td>
            <td >1 C</td>
            <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...<br>more...<br>more...<br>more...</td>
            <td>1 E</td><td>2 E</td>
            <td >1 F</td>
            <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
            <td>1 H</td><td>222 H</td>
            <td >1 I</td>
            <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
            <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
            <td >1 L</td>
            <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
            <td>1 N</td><td>2 N</td>
            <td >1 1 1 1 1 1 1 O</td>
        </tr>
        <tr>
            <td colspan="3">fixed 5</td>
            <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
            <td>1 B</td><td>2 B</td>
            <td >1 C</td>
            <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
            <td>1 E</td><td>2 E</td>
            <td >1 F</td>
            <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
            <td>1 H</td><td>222 H<br>H<br>H<br>H<br>H</td>
            <td >1 I</td>
            <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
            <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
            <td >1 L</td>
            <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
            <td>1 N</td><td>2 N</td>
            <td >1 1 1 1 1 1 1 O</td>
        </tr>
        <tr>
            <td>6</td>
            <td>6</td>
            <td>6</td>
            <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
            <td>1 B</td><td>2 B</td>
            <td >1 C</td>
            <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
            <td>1 E</td><td>2 E</td>
            <td >1 F</td>
            <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
            <td>1 H</td><td>222 H</td>
            <td >1 I</td>
            <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
            <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
            <td >1 L</td>
            <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
            <td>1 N</td><td>2 N</td>
            <td >1 1 1 1 1 1 1 O</td>
        </tr>
    </table>
    <br />
    <!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk-->
    <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
        <tr>
        <td width="35%" align="left">footer junk left</td>
        <td >- FOOTER JUNK MIDDLE -</td>
        <td width="35%" align="right">footer junk right</td>
        </tr>
    </table>
</form>
</BODY>
</HTML>
于 2012-06-06T21:42:48.773 回答
15

我同意@FedericoGiust 的回答；但既然你要求更多细节......

<script type="text/javascript"
        src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script type="text/javascript"
        src="http://datatables.net/download/build/jquery.dataTables.min.js">
</script>
<script type="text/javascript"
        src="http://datatables.net/download/build/FixedColumns.min.js">
</script>
<script type="text/javascript">
  $(document).ready(function() {
    var oTable = $('#bigtable').dataTable({
        "sScrollY": "300px",  // set vertical size dynamically here
        "sScrollX": "100%",
        "bPaginate": false,
        "bFilter": false
    });
    new FixedColumns(oTable);
  });​
</script>

您需要添加一行虚拟列标题，以便 Datatables 能够处理 colspan。

在jsfiddle上看到它。

于 2012-06-04T16:24:00.203 回答
11

您可以使用数据表

数据表

这是一个了不起的 jquery 表格插件，它还有许多有趣的附加功能和插件，包括固定页眉和页脚、列排序、可变宽度、固定宽度、ajax 等等。

于 2012-05-31T17:59:55.870 回答
9

适用于普通表格，它只更改标题单元格，就地（不删除、复制或在表格元素注入之外）。这具有允许任何单元格中任何尺寸的任何内容的优点（+允许动态修改该内容）。

查看实际操作：fullpage.html、overflow_scroll.html、fullpage_untouched.html。

垂直和水平th单元格在滚动时应保持可见并对齐。

此解决方案不使用任何框架。随意使用 jquery 或原型（或任何其他框架）替换现有的助手（滚动偏移）。

_table_make_fixed_header_reposition在对表格内容进行动态更改时，您应该添加要调用的代码挂钩。

我没有在 Windows XP 上进行测试（所有浏览器都没有加速渲染）。

蓝色背景、阴影、边框等都是 CSS 很酷的东西。你可以随心所欲地制作它，你只需要创建一个普通的表格（只需添加单元格样式.DivWrapper而不是TH）。

<!DOCTYPE html>
<body>
    <head>
        <style>
            .TableLarge td, .TableLarge th{
                border-style: solid;
                border-width: 1px;

                border-color: #CAE3EF;

                padding: 7px;
                white-space: nowrap;
                font-family: Verdana;
                font-size: 10px;
            }

            .TableLarge{
                border-style: none;
                border-collapse: collapse;
            }

            #padding_for_test{
                height: 3000px;
                width: 9000px;
            }

        </style>
        <script type="text/javascript">
            function table_make_fixed_header(elTable, bHorizontal, bVertical, nRepositionIntervalMilliseconds, bWrappedByScrollableDiv)
            {
                if(!bHorizontal && !bVertical)
                    return;

                if(!elTable.id)
                    elTable.id="FixedVH_Headers_"+(new Date().getTime())+Math.floor(Math.random()*10000000);

                var zIndex=1;
                if(window.getComputedStyle)
                    zIndex=parseInt(window.getComputedStyle(elTable))?parseInt(window.getComputedStyle(elTable))+1:1;

                var fnSetupHeaderCell=function(elCell, zIndex)
                {
                    var elDivWrapper=document.createElement("div");

                    elDivWrapper.setAttribute("style", "-moz-box-shadow: 3px 3px 4px #aaaaaa; -webkit-box-shadow: 3px 3px 4px #aaaaaa; box-shadow: 3px 3px 4px #aaaaaa;");
                    elDivWrapper.style.zIndex=zIndex;
                    elDivWrapper.style.backgroundColor="#0000ee";
                    elDivWrapper.style.color="white";
                    elDivWrapper.style.padding="3px";

                    elDivWrapper.className="DivWrapper";
                    elDivWrapper.style.position="relative";

                    while(elCell.childNodes.length)
                        elDivWrapper.appendChild(elCell.childNodes[0]);
                    elCell.appendChild(elDivWrapper);
                };

                if(bVertical)
                    for(var r=bHorizontal?1:0; r<elTable.rows.length; r++)
                        fnSetupHeaderCell(elTable.rows[r].cells[0], zIndex);
                if(bHorizontal)
                    for(var c=bVertical?1:0; c<elTable.rows[0].cells.length; c++)
                        fnSetupHeaderCell(elTable.rows[0].cells[c], zIndex);

                _table_make_fixed_header_reposition(elTable.id, bHorizontal, bVertical, bWrappedByScrollableDiv);

                //this could be CPU intensive, depending on the number of events fired and size of the table.
                var onScrollEventHandler=function(ev){
                    _table_make_fixed_header_reposition(elTable.id, bHorizontal, bVertical, bWrappedByScrollableDiv);
                };

                var elScrollable=bWrappedByScrollableDiv?elTable.parentNode:window;
                if(elScrollable.addEventListener)
                    elScrollable.addEventListener('scroll', onScrollEventHandler, false);
                else if (elScrollable.attachEvent)
                    elScrollable.attachEvent('scroll', onScrollEventHandler);

                //this is undesired for performance reasons, hooks and event listeners are prefered instead.
                if(nRepositionIntervalMilliseconds>0)
                    setInterval("_table_make_fixed_header_reposition('"+elTable.id+"', "+(bHorizontal?"true":"false")+", "+(bVertical?"true":"false")+", "+(bWrappedByScrollableDiv?"true":"false")+")", nRepositionIntervalMilliseconds);
            }

            function _table_make_fixed_header_reposition(strTableID, bHorizontal, bVertical, bWrappedByScrollableDiv)
            {
                var elTable=document.getElementById(strTableID);

                var strLeft;
                var strTop;
                if(bWrappedByScrollableDiv)
                {
                    strLeft=Math.min(Math.max(elTable.parentNode.scrollLeft-elTable.offsetLeft+elTable.parentNode.offsetLeft, 0), elTable.offsetWidth)+"px";
                    strTop=Math.min(Math.max(elTable.parentNode.scrollTop-elTable.offsetTop+elTable.parentNode.offsetTop, 0), elTable.offsetHeight)+"px";
                }
                else
                {
                    strLeft=Math.min(Math.max(f_scrollLeft()-elTable.offsetLeft, 0), elTable.offsetWidth)+"px";
                    strTop=Math.min(Math.max(f_scrollTop()-elTable.offsetTop, 0), elTable.offsetHeight)+"px";
                }

                if(bVertical)
                    for(var r=bHorizontal?1:0; r<elTable.rows.length; r++)
                        elTable.rows[r].cells[0].childNodes[0].style.left=strLeft;
                if(bHorizontal)
                    for(var c=bVertical?1:0; c<elTable.rows[0].cells.length; c++)
                        elTable.rows[0].cells[c].childNodes[0].style.top=strTop;
            }


            //http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
            function f_scrollLeft(){
                return f_filterResults (
                    window.pageXOffset ? window.pageXOffset : 0,
                    document.documentElement ? document.documentElement.scrollLeft : 0,
                    document.body ? document.body.scrollLeft : 0
                );
            }
            function f_scrollTop() {
                return f_filterResults (
                    window.pageYOffset ? window.pageYOffset : 0,
                    document.documentElement ? document.documentElement.scrollTop : 0,
                    document.body ? document.body.scrollTop : 0
                );
            }
            function f_filterResults(n_win, n_docel, n_body) {
                var n_result = n_win ? n_win : 0;
                if (n_docel && (!n_result || (n_result > n_docel)))
                    n_result = n_docel;
                return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
            }


            //you should add an event handler for onload here
        </script>
    </head>
    <body>
        <p>
            Vertical and horizontal th cells should remain visible and aligned while scrolling.<br>
            This solution does not use any frameworks. Feel free to replace existing helpers (scroll offsets) using jquery or prototype (or any other framework).
        </p>

        <div style="width: 800px; height: 600px; overflow: scroll">
            <table class="TableLarge" id="mySpecialHugeTable">
                <tr>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                </tr>
                <tr>
                    <th>Fixed!<br>multi-line</th>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>Umm...how is this done again?</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>Umm...how is this done again?</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>This is a very short story...Real short.</td>
                </tr>
                <tr>
                    <th>Fixed!<br>multi-line</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Umm...how is this done again?</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>Umm...how is this done again?</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>This is a very short story...Real short.</td>
                </tr>
                <tr>
                    <th>Fixed!<br>multi-line</th>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>Umm...how is this done again?</td>
                    <td>The goose is pretty.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Hello world!</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                </tr>
                <tr>
                    <th>Fixed!<br>multi-line</th>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>Umm...how is this done again?</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Umm...how is this done again?</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>Umm...how is this done again?</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>This is a very short story...Real short.</td>
                </tr>
                <tr>
                    <th>Fixed!<br>multi-line</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>Umm...how is this done again?</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>Umm...how is this done again?</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>This is a very short story...Real short.</td>
                </tr>
            </table>
        </div>

        <div id="padding_for_test">&nbsp;</div>

        <script type="text/javascript">
            table_make_fixed_header(document.getElementById("mySpecialHugeTable"), /*bHorizontal*/ true, /*bVertical*/ true, 1000, /*bWrappedByScrollableDiv*/ true);
        </script>
    </body>
</html>

删除一些 CSS 并使固定单元格与可滚动单元格相同应该相当容易。此外，如果您想要一个专用的滚动条，您可以将其包装在一个可滚动的中，并通过使用的滚动偏移量DIV在内部进行调整。_table_make_fixed_header_repositionDIV

编辑：更新代码以使标题尽可能靠近边缘，当表格超出视口时（+选项在垂直或水平标题之间进行选择，或两者兼而有之）。

Edit2：添加了可滚动div支持，并将其设为示例中的默认值。

于 2012-06-05T23:57:49.857 回答
6

如果您不想使用插件，请结合固定标题垂直滚动 (CSS)

tbody{display:block;overflow-y:auto;/*+fixed height set w/jQuery etc*/}

​用固定的第一列水平滚动（JS）

$('#table-container').scroll(function() {
    var _left = $(this).scrollLeft();
    $('#table th').css('left', _left); //"stick" the first column to viewport
});

#table-container{overflow-x:scroll;/*+fixed width set*/}
thead, tbody{display:block;}    
th {position:relative;left:0;/*gets adjusted with JS above*/}

Fiddle'd here，但这并没有解决调整大小以适应浏览器尺寸的问题。假设它将在专用窗口中运行，那将是微不足道的；如果不是，并且它打算在页面内运行，那么保持它整洁将是相当困难的。

祝你好运。

于 2012-06-05T10:11:32.900 回答
3

如果您不喜欢使用重载插件，您可以这样做：

创建一个只有固定表头的表

创建一个具有固定宽度（记住滚动条宽度）和高度的 div 并设置滚动 Y 方向。在这个 div 中放置表格的主体。

创建第三个也是最后一个表并将该表放在 div 下方，使其看起来像 1 个大表。

<table> HEADER </table>
<div><table> BODY </table></div> (div is scrollable)
<table> Foot </table>

如果您需要使用裸 javascript 进行动态更改，则不需要使用 jquery 或其他繁重的插件。

于 2012-06-06T12:20:34.863 回答