1. 首页
  2. 问题
  3. 具有固定滚动行和固定滚动列的大型动态html表
小编典典

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

css

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

   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>

阅读 174

收藏
2020-05-16

共1个答案

小编典典

编辑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>
2020-05-16