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

2024-01-09

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

   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>

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

Usage:

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

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

Edit 4: Updated for colSpan on column 1. Demo: ~~http://jsfiddle.net/skram/rKjk3/26/~~

Edit 3: Did some cleanup and some fixes: ~~http://jsfiddle.net/rKjk3/22 http://jsfiddle.net/rKjk3/22~~ Tested in IE9, FF and Chrome. (I don't have latest IE to test it now)

Edit 2: Fix for IE: ~~http://jsfiddle.net/rKjk3/15/embedded/result/~~ (See latest above)

Edit 1: Fix for resize window ~~http://jsfiddle.net/rKjk3/11/~~ (See latest above)

添加了 window.resize 事件处理程序来设置窗口的宽度rightContainer因此，当您调整大小时，实际表格的宽度将会增加。
删除了固定宽度SBWrapper从而可以充分利用容器内部的可用空间。

我已经根据您的要求创建了 2 个演示。

示例展示了使用简单标记结构呈现的 html 的外观。这将允许您查看正在渲染的结构及其工作方式:)
DEMO: http://jsfiddle.net/GmJ22/7/ http://jsfiddle.net/GmJ22/7/
Actual demo with the markup that you have posted. The code is just a rough version and may require some cleanup. Right now you can configure the width and height of the table. I am posting it so that you can take a look and give me some feedback.
DEMO: ~~http://jsfiddle.net/rKjk3/10/embedded/result/~~ (see below fixed versions)

完整代码：

<!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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

css

htmltable

具有固定滚动行和固定滚动列的大型动态大小 html 表格的相关文章

c# 如何生成锦标赛括号 HTML 表

所以我已经被这个问题困扰了三个星期但我一生都无法弄清楚我想做的是使用表格获得这种输出演示 http www esl world net masters season6 hanover sc2 playoffs rankings htt
删除 Laravel Mix 中的临时文件

我想在 laravel mix 构建期间或之后删除临时构建文件这是我目前拥有的一些代码但是del不工作 const mix require laravel mix const del require del compile sass i
JavaScript：预期的赋值或函数调用，却看到了一个表达式

我正在使用 JSHint 来确保我的 JavaScript 是严格的但我收到以下错误预期是赋值或函数调用但看到的是表达式关于以下代码 var str A B C D var data var strArr str split fo
无法在渲染器进程中使用 Node.js API

无法在 Electron 中使用任何与 Electron 或节点相关的操作未定义获取错误过程我检查了他们指导添加节点支持的各个地方但这已经完成了所以卡在这里我的主要应用程序代码是 const electron require el
Phonegap facebook 插件：android 的各种问题

我正在尝试将 Phonegap 3 1 与 Phonegap facebook plugin 集成以使我的应用程序能够使用 facebook 登录 https github com phonegap phonegap facebook p
JavaScript 访问密码字段值是否被视为存在安全风险？

如果安全正确地存储密码是良好的风格和安全性那么对于要求用户输入密码的网页来说不应该也是如此吗考虑这个例子
xpath：选择中断标签之前和之后的文本节点

考虑以下因素混合 br and br text1 br text2 br text3 br text4 br text5 如何找到每个文本节点我正在考虑符合 br 标签之前或之后的条件的东西但不确定是否 br and br 在 xpa
如何生成 JavaScript 堆栈跟踪？ [关闭]

Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案关于如何以跨浏览器的方式在 javascript 中生成堆栈跟踪有什么建议吗较新的浏览器 Chrome 和 Firefox 公开了一个允
如何在 JavaScript 中对关联数组进行排序？

我需要为我的一个项目通过 JS 对关联数组进行排序我发现这个函数在 Firefox 中运行得很好但不幸的是它在 IE8 OPERA CHROME 中不起作用无法找到使其在其他浏览器中运行的方法或者找到另一个适合该目的的函数我真的很
如何模板化 Select2 的预选值

我预先选择的值Select2 https select2 org如下所示 function formatState state console log state text2 I found undefined here console l
让登录更安全

我已使用此代码进行管理员登录仅当用户输入正确的用户名和密码时才应打开loginhome php 但后来我意识到这根本不安全任何人都可以直接访问 mywebsite loginhome php 而无需登录注销后可以使用后退按钮打开 l
文本后面有粗下划线

如何使用 span 和 css 在文本 ABC 后面重现这种下划线我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p
Javascript：更改输入值时设置光标位置

当您输入公式时我试图在我的应用程序中重现类似于 Microsoft Excel Google Sheets 的用户体验并且您可以使用不同的公式和变量来自动完成下拉菜单为此在验证自动完成功能后我希望能够控制光标的位置例如如果我输
如何使用 Jest 测试对象键和值的相等性？

我有一个mapModule我在其中导入组件并导出它们 import ComponentName from components ComponentName export default name ComponentName 我该如何测试ma
随机定位的 div，不重叠

所有 div 都像我需要的那样随机放置但它们偶尔会重叠这只是一个机会问题我怎样才能防止这种情况发生理想情况下我能够设置它们之间的最小距离我可以通过进一步开发当前的 javascript 来实现这一目标吗我需要考虑完全不同的方
Angular 2访问组件内的ng-内容

我怎样才能访问 content 来自组件类本身的组件我想做这样的事情
跨浏览器：禁用输入字段的不同行为（文本可以/不能复制）

我有一个被禁用的输入 html 字段在某些浏览器 Chrome Edge Internet Explorer 和 Opera 中可以选择并复制文本但至少在 Firefox 中这是不可能的您可以通过在不同浏览器中执行以下代码来测试
在 JSP 或 Javascript 中清除浏览器缓存中的图像

我正在为一所大学开发JSP Web 应用程序用户页面中显示人员图片用户注销后如何从网络浏览器缓存中清除这张图片使用 JSP 或 JavaScript 那是不可能的最好的选择是完全禁用相关资源的缓存创建一个filter https
如何更改 Shiny 中 navbarPage 折叠的断点

我想用shiny navbarPage collapsible TRUE 当在小屏幕上查看我的 Shiny 应用程序时将导航元素折叠到菜单中默认情况下当浏览器宽度小于 940 像素时会触发折叠有什么方法可以改变这一点以便在稍大的浏
如何设置 Firebase 用户的显示名称？

根据Firebase网站上的JS Auth文档它只展示了如何获取 displayName 以及如何更新 displayName 所以我尝试更新它但这有点不合逻辑因为你怎么能在不创建某些东西的情况下更新它呢所以我的问题是如何设置注册

随机推荐

使用 Promise.all 解决获取请求

我有一个包含 4 个请求对象的数组我想在它们上使用 Fetch API 并获取承诺然后我想解决每一个承诺并取回价值这是我构建请求对象的方法 let requestsArray urlArray map url gt let reque
jQuery 动画 - 什么时候是异步的，什么时候不是？

我有两个要设置动画的 div div div div div 我在 jQuery 中调用 animate 如下所示 sprite animate width 1 400 character animate width 1 400 chara
在 pandas 中使用 groupby 过滤数据

我有一个 DataFrame 其中包含以下数据每行代表电视剧每集中出现的一个单词如果一个单词在一个剧集中出现 3 次则 pandas 数据框有 3 行现在我需要过滤一个单词列表这样我应该只得到出现超过或等于 2 次的单词我可以通
捕获单个任务中的异常并重新启动它们

如果我创建一系列asyncio顶级类中的任务所有这些任务基本上都应该永远运行如下所示 asyncio create task asyncio create task asyncio create task self event loop
UICollectionView 单元格不可见

我最近在我的故事板中添加了一个 UICollectionView 它目前被另一个视图推入视图这似乎工作正常但是使用故事板编辑器我将视图设置为包含 35 个单元格这些单元格在编辑器中看起来很好但是当我运行应用程序中的单元格是不可见
使用azure数据工厂更新Azure机器学习模型

当我使用数据工厂更新 Azure ML 模型时如文档所述 https learn microsoft com en us azure data factory v1 data factory azure ml update resourc
如何使用 C++ 更改/设置 DNS？

我正在尝试使用 C 更改设置 DNS 目前我无法找到这方面的任何资源 public static NetworkInterface GetActiveEthernetOrWifiNetworkInterface var Nic Netwo
使用 SQL 编辑 XML 列。不那么结构化的 XML

这个问题是一个这个问题的后续 https stackoverflow com q 40080985 5089204 如何通过获取的新标签来编辑 XMLXXX 不是那么结构化的 xml 需要帮助我对 XML 和 XQuery 非常陌生如
与 C# 和 VBA 的并行 COM 互操作

我不是在谈论从 C 调用 VBA COM 相反我想做的是在 MS Access 中使用 VBA 调用 C 库而不注册 DLL 我已经玩了一段时间的并行互操作但没有成功我终于意识到 mdb manifest 可能不是 exe mani
自动使基构造函数在派生类中可用？

我有一个带有两个构造函数的基类需要一个参数 public abstract class StoreBase private readonly SomeObject sobj protected StoreBase SomeObject s
您重构代码的方式和频率如何？

我的问题模糊地涉及this one https stackoverflow com questions 140677 how often should you refactor 但是它不涉及技术或实践我在读务实的程序员并且它强烈提倡尽可
将大型 JS blob 传递给 Blazor byte[]

我需要使用录制一些音频甚至视频媒体API https developer mozilla org en US docs Web API MediaRecorder in JS example https mbuotidem github
在生产中部署 Spring Boot

我们有一个 Spring Boot Angular 应用程序目前我们正在将其打包为 jar 并运行它可以将包装用作 JAR 吗或者我们应该转向 WAR 类型的包装会有什么不同呢除了部署方式之外没有其他区别使用 JAR 时 Sp
GridX启动后如何重新计算列宽？

根据文档 https github com oria gridx wiki Create the Simplest Gridx https github com oria gridx wiki Create the Simplest Gri
SVG animateTransform 平移和缩放同时失败

我有一条想要使用的动画路径animateTransform 我想同时平移和缩放路径这不起作用显然只有第二个动画起作用在这种情况下scale 我究竟做错了什么 svg width 300px border 1px solid fill
在ubuntu Linux服务器上通过命令行运行php文件

我试图在 ubuntu Linux 服务器上运行 php 文件但当我运行 php file name php 时出现找不到命令错误在网上搜索时我发现一篇文章建议我运行 sudo aptitude install php5 cli
InterfaceBuilder NSButton 连接到 NSViewController 原因“无法连接操作，目标类 NSObject 不响应”

我有一个基于视图的NSTableView其文件的所有者是ViewController 我在自定义上拖动了一个按钮用于删除 NSTableCellView 所以我想单击按钮并从 tableView 中删除当前行但是当添加行时调试控制台
隐藏用于 editText 焦点/触摸的软键盘

我试图隐藏软键盘使其在 EditText 接收焦点或触摸事件时不显示我希望 EditText 是可编辑的 EditText 中会有文本因此我希望 EditText 响应触摸事件以便定位光标但我将有专用的编辑按钮而不是使用软键盘
使用 Jasmine 测试时，Angularjs 注入控制器为空

我目前正在与Angular 以及使用 Karma 和 Jasmine进行测试例如过滤器被注入到主模块中并且可以毫无问题地进行测试但是当我尝试测试控制器时我得到了一个空物体注射后这是我的主模块的代码 function use st
具有固定滚动行和固定滚动列的大型动态大小 html 表格

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

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

具有固定滚动行和固定滚动列的大型动态大小 html 表格 的相关文章

随机推荐

热门标签

具有固定滚动行和固定滚动列的大型动态大小 html 表格的相关文章