javascript - 具有固定滚动行和固定滚动列的大型动态大小的 html 表-6ren

javascript - 具有固定滚动行和固定滚动列的大型动态大小的 html 表

转载作者：IT王子更新时间：2023-10-29 02:59:42

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

   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
+--------------------------------------------------------------+  \/

这只需要在现代浏览器中工作，使用所有/任何: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>

最佳答案

编辑 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 个演示。

示例显示呈现的 html 将如何使用简单的标记结构。这将允许您查看正在呈现的结构及其工作方式:)
DEMO: http://jsfiddle.net/GmJ22/7/
带有您发布的标记的实际演示。该代码只是一个粗略的版本，可能需要一些清理。现在您可以配置表格的宽度和高度。我发布它是为了让您可以看看并给我一些反馈。
DEMO: ~~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>

关于javascript - 具有固定滚动行和固定滚动列的大型动态大小的 html 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10838700/

文章推荐： javascript - 嵌入没有 iframe 的外部页面？

文章推荐： xml - 如何在 XSLT 中呈现带有属性的自闭合 HTML 标记？

文章推荐： c# - 文件已存在时创建 XmlWriter 时出错

文章推荐： javascript - 有没有办法使用 CSS3/Canvas 来 flex/弧形文本

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

IT王子

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 具有固定滚动行和固定滚动列的大型动态大小的 html 表