具有固定滚动行和固定滚动列的大型动态大小的 html 表 [英] Large dynamically sized html table with a fixed scroll row and fixed scroll column
本文介绍了具有固定滚动行和固定滚动列的大型动态大小的 html 表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在网页上显示一个大表格，并且需要防止第一列和第一行滚动.我想动态设置这个表格的垂直大小(在一些静态大小的页眉/页脚页面内容)使其尽可能高，而不强制浏览器窗口具有垂直滚动条.
I need to display a large table on a web page and need to prevent the first column and first row from scrolling. I'd like to dynamically set the vertical size of this table (between some static size header/footer page content) to make it as tall as possible without forcing the browser window to have a vertical scrollbar.
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
this only needs to work in modern browsers, using all/any: html, css, javascript, jquery
重要性顺序:
- 包含许多表单字段、隐藏值、javascript 行折叠等的复杂表格，我稍后会添加这些内容
- 第一行将有 colspans
- 行的高度可变
- 第一行:从垂直滚动固定，但可以水平滚动
- 第一列:从水平滚动固定，但可以垂直滚动
- 动态调整此表格"的大小以填充静态大小页眉/页脚 html 之间的屏幕
- 滚动条的位置(如上面我的精美 ascii 艺术中所描绘的)并不重要.
这是一个非常基本的屏幕 html 示例，没有任何滚动/大小调整功能:
here is a very basic html sample of the screen, without any of the scroll/sizing features:
<!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:- 添加了可配置的固定行和列.- 修复了列宽和高度问题- 减少复杂选择器的使用
Edit 5: - Added configurable fixed Rows and Columns. - Fixed column width and height issues - Reduced usage of complex selectors
用法:
$('#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/
Edit 4: Updated for colSpan on column 1. Demo: http://jsfiddle.net/skram/rKjk3/26/
编辑 3: 做了一些清理和修复: http://jsfiddle.net/rKjk3/22 在 IE9、FF 和 Chrome 中测试.(我现在没有最新的 IE 来测试它)
Edit 3: Did some cleanup and some fixes: http://jsfiddle.net/rKjk3/22 Tested in IE9, FF and Chrome. (I don't have latest IE to test it now)
编辑 2: IE 修复:http://jsfiddle.net/rKjk3/15/embedded/result/(见上文最新)
Edit 2: Fix for IE: http://jsfiddle.net/rKjk3/15/embedded/result/ (See latest above)
编辑 1: 修复调整窗口大小 http://jsfiddle.net/rKjk3/11/(见上面的最新版本)
Edit 1: Fix for resize window http://jsfiddle.net/rKjk3/11/ (See latest above)
- 添加了 window.resize 事件处理程序来设置
rightContainer的宽度，因此实际表格的宽度会随着您调整大小而增加. - 移除了
SBWrapper上的固定宽度，以便它可以充分利用容器内的可用空间.
- Added window.resize event handler to set the width of the
rightContainerso the width of actual table will be increased as you resize. - Removed fixed width on
SBWrapperso that it can fully utilize the available space inside the container.
我已经根据您的要求创建了 2 个演示.
I have created 2 demo for your requirement.
使用简单的标记结构展示呈现的 html 的示例.这将允许您查看正在呈现的结构及其工作方式:)
演示: http://jsfiddle.net/GmJ22/7/
带有您发布的标记的实际演示.代码只是一个粗略的版本，可能需要一些清理.现在您可以配置表格的宽度和高度.我发布它，以便您可以查看并给我一些反馈.
演示: http://jsfiddle.net/rKjk3/10/embedded/result/(见下面的固定版本)
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>
这篇关于具有固定滚动行和固定滚动列的大型动态大小的 html 表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
