具有固定滚动行和固定滚动列的大型动态大小 html 表
Large dynamically sized html table with a fixed scroll row and fixed scroll column
我需要在网页上显示一个大表格，并且需要防止第一列和第一行滚动。 我想动态设置此表的垂直大小（在一些静态大小的页眉/页脚页面内容之间），使其尽可能高，而不会强制浏览器窗口具有垂直滚动条。
browser window'/
+--------------------------------------------------------------+ /'
| /' /' /' /' /' /' /' /' | fixed static
| web page header fields and text | | size
| '/ '/ '/ '/ '/ '/ '/ '/ |__'/__
| +----<<<table-scrollbar>>>>>----------------+ | /'
|+--------------+--------+--------+--------+--------+-------+ | |
|| | |colspan | | | fixed | | |
|| fixed | fixed | fixed | fixed | fixed | more> | | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------++ | |
|| fixed | | | | | | | | | | || | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+t | |
|| fixed | | | | | | | | | | |a | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+b | |
|| fixed | | | | | | | | | | |l | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+e | set
|| fixed | | | | | | | | | | || | dynamic
|| multi-line | | | | | | | | | | |s | size at
|+--------------+--+--+--+---+----+--+--+--+--------+-------+c | runtime
|| fixed | | | | | | | | | | |r | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+o | |
|| fixed | | | | | | | | | | |l | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+l | |
|| fixed | | | | | | | | | | |b | |
|| | | | | | | | | | | |a
|+--------------+--+--+--+---+----+--+--+--+--------+-------+r | |
|| fixed, moreV | | | | | | | | | | || | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------++ |__'/__
| /' /' /' /' /' /' /' /' | /'
| web page footer fields and text | fixed static
| '/ '/ '/ '/ '/ '/ '/ '/ | | size
+--------------------------------------------------------------+ '/
这只需要在现代浏览器中工作，使用all/any：html，css，JavaScript，jQuery。
重要性顺序：
- 包含许多表单字段、隐藏值、JavaScript 行折叠等的复杂表，稍后我将添加这些表单
- 第一排将有弓形
- 行的高度将可变
- 第一行：固定垂直滚动，但可以水平滚动
- 第一列：从水平滚动固定，但可以垂直滚动
- 动态调整此"表格"的大小以填充静态大小页眉/页脚 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 的外观。这将允许您查看正在渲染的结构以及它是如何工作的:)
演示：http://jsfiddle.net/GmJ22/7/带有您发布的标记的实际演示。该代码只是一个粗略的版本，可能需要一些清理。现在，您可以配置表格的宽度和高度。我正在发布它，以便您可以查看并给我一些反馈。
演示：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>
我同意@FedericoGiust的回答;但既然你要求更多细节......
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script type="text/javascript"
src="http://datatables.net/download/build/jquery.dataTables.min.js">
</script>
<script type="text/javascript"
src="http://datatables.net/download/build/FixedColumns.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
var oTable = $('#bigtable').dataTable({
"sScrollY": "300px", // set vertical size dynamically here
"sScrollX": "100%",
"bPaginate": false,
"bFilter": false
});
new FixedColumns(oTable);
});
</script>
您需要添加一行虚拟列标题，以便数据表能够处理 colspan。
在jsfiddle上看到它。
您可以使用数据表
数据表
这是一个了不起的 jquery 表插件，它还具有许多有趣的附加功能和插件，包括固定页眉和页脚、列排序、可变宽度、固定宽度、ajax 等等。
适用于普通表，它只就地更改标题单元格（不删除、复制或在表元素注入之外）。这样做的好处是允许任何单元格中的任何维度的任何内容（+允许动态修改该内容）。
查看它的实际效果：整页.html、overflow_scroll.html、fullpage_untouched.html。
滚动时，垂直和水平th单元格应保持可见和对齐。
此解决方案不使用任何框架。随意使用 jquery 或原型（或任何其他框架）替换现有的帮助程序（滚动偏移量）。
在对表的内容进行动态更改时，应添加代码挂钩以调用_table_make_fixed_header_reposition。
我没有在Windows XP上对此进行测试（所有浏览器中都没有加速渲染）。
蓝色背景，阴影，边框等只是CSS很酷的东西。您可以根据需要执行此操作，并且只需创建一个普通表格（只需在.DivWrapper上添加单元格样式而不是TH）。
<!DOCTYPE html>
<body>
<head>
<style>
.TableLarge td, .TableLarge th{
border-style: solid;
border-width: 1px;
border-color: #CAE3EF;
padding: 7px;
white-space: nowrap;
font-family: Verdana;
font-size: 10px;
}
.TableLarge{
border-style: none;
border-collapse: collapse;
}
#padding_for_test{
height: 3000px;
width: 9000px;
}
</style>
<script type="text/javascript">
function table_make_fixed_header(elTable, bHorizontal, bVertical, nRepositionIntervalMilliseconds, bWrappedByScrollableDiv)
{
if(!bHorizontal && !bVertical)
return;
if(!elTable.id)
elTable.id="FixedVH_Headers_"+(new Date().getTime())+Math.floor(Math.random()*10000000);
var zIndex=1;
if(window.getComputedStyle)
zIndex=parseInt(window.getComputedStyle(elTable))?parseInt(window.getComputedStyle(elTable))+1:1;
var fnSetupHeaderCell=function(elCell, zIndex)
{
var elDivWrapper=document.createElement("div");
elDivWrapper.setAttribute("style", "-moz-box-shadow: 3px 3px 4px #aaaaaa; -webkit-box-shadow: 3px 3px 4px #aaaaaa; box-shadow: 3px 3px 4px #aaaaaa;");
elDivWrapper.style.zIndex=zIndex;
elDivWrapper.style.backgroundColor="#0000ee";
elDivWrapper.style.color="white";
elDivWrapper.style.padding="3px";
elDivWrapper.className="DivWrapper";
elDivWrapper.style.position="relative";
while(elCell.childNodes.length)
elDivWrapper.appendChild(elCell.childNodes[0]);
elCell.appendChild(elDivWrapper);
};
if(bVertical)
for(var r=bHorizontal?1:0; r<elTable.rows.length; r++)
fnSetupHeaderCell(elTable.rows[r].cells[0], zIndex);
if(bHorizontal)
for(var c=bVertical?1:0; c<elTable.rows[0].cells.length; c++)
fnSetupHeaderCell(elTable.rows[0].cells[c], zIndex);
_table_make_fixed_header_reposition(elTable.id, bHorizontal, bVertical, bWrappedByScrollableDiv);
//this could be CPU intensive, depending on the number of events fired and size of the table.
var onScrollEventHandler=function(ev){
_table_make_fixed_header_reposition(elTable.id, bHorizontal, bVertical, bWrappedByScrollableDiv);
};
var elScrollable=bWrappedByScrollableDiv?elTable.parentNode:window;
if(elScrollable.addEventListener)
elScrollable.addEventListener('scroll', onScrollEventHandler, false);
else if (elScrollable.attachEvent)
elScrollable.attachEvent('scroll', onScrollEventHandler);
//this is undesired for performance reasons, hooks and event listeners are prefered instead.
if(nRepositionIntervalMilliseconds>0)
setInterval("_table_make_fixed_header_reposition('"+elTable.id+"', "+(bHorizontal?"true":"false")+", "+(bVertical?"true":"false")+", "+(bWrappedByScrollableDiv?"true":"false")+")", nRepositionIntervalMilliseconds);
}
function _table_make_fixed_header_reposition(strTableID, bHorizontal, bVertical, bWrappedByScrollableDiv)
{
var elTable=document.getElementById(strTableID);
var strLeft;
var strTop;
if(bWrappedByScrollableDiv)
{
strLeft=Math.min(Math.max(elTable.parentNode.scrollLeft-elTable.offsetLeft+elTable.parentNode.offsetLeft, 0), elTable.offsetWidth)+"px";
strTop=Math.min(Math.max(elTable.parentNode.scrollTop-elTable.offsetTop+elTable.parentNode.offsetTop, 0), elTable.offsetHeight)+"px";
}
else
{
strLeft=Math.min(Math.max(f_scrollLeft()-elTable.offsetLeft, 0), elTable.offsetWidth)+"px";
strTop=Math.min(Math.max(f_scrollTop()-elTable.offsetTop, 0), elTable.offsetHeight)+"px";
}
if(bVertical)
for(var r=bHorizontal?1:0; r<elTable.rows.length; r++)
elTable.rows[r].cells[0].childNodes[0].style.left=strLeft;
if(bHorizontal)
for(var c=bVertical?1:0; c<elTable.rows[0].cells.length; c++)
elTable.rows[0].cells[c].childNodes[0].style.top=strTop;
}
//http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
function f_scrollLeft(){
return f_filterResults (
window.pageXOffset ? window.pageXOffset : 0,
document.documentElement ? document.documentElement.scrollLeft : 0,
document.body ? document.body.scrollLeft : 0
);
}
function f_scrollTop() {
return f_filterResults (
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0
);
}
function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result || (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}
//you should add an event handler for onload here
</script>
</head>
<body>
<p>
Vertical and horizontal th cells should remain visible and aligned while scrolling.<br>
This solution does not use any frameworks. Feel free to replace existing helpers (scroll offsets) using jquery or prototype (or any other framework).
</p>
<div style="width: 800px; height: 600px; overflow: scroll">
<table class="TableLarge" id="mySpecialHugeTable">
<tr>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
</tr>
<tr>
<th>Fixed!<br>multi-line</th>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>Umm...how is this done again?</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>This is a very short story...Real short.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>Umm...how is this done again?</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>This is a very short story...Real short.</td>
</tr>
<tr>
<th>Fixed!<br>multi-line</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>Umm...how is this done again?</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>Umm...how is this done again?</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>This is a very short story...Real short.</td>
</tr>
<tr>
<th>Fixed!<br>multi-line</th>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>Umm...how is this done again?</td>
<td>The goose is pretty.</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>Hello world!</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
</tr>
<tr>
<th>Fixed!<br>multi-line</th>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>Umm...how is this done again?</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>This is a very short story...Real short.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>Umm...how is this done again?</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>Umm...how is this done again?</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>This is a very short story...Real short.</td>
</tr>
<tr>
<th>Fixed!<br>multi-line</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>Umm...how is this done again?</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>This is a very short story...Real short.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>Umm...how is this done again?</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>This is a very short story...Real short.</td>
</tr>
</table>
</div>
<div id="padding_for_test"> </div>
<script type="text/javascript">
table_make_fixed_header(document.getElementById("mySpecialHugeTable"), /*bHorizontal*/ true, /*bVertical*/ true, 1000, /*bWrappedByScrollableDiv*/ true);
</script>
</body>
</html>
删除一些CSS并使固定单元格与可滚动单元格相同应该相当容易。此外，如果你想要一个专用的滚动条，你可以把它包装在一个可滚动的DIV中，并通过使用DIV的滚动偏移量在_table_make_fixed_header_reposition内部进行调整。
编辑：更新了代码，当表格超出视口时，使标题尽可能靠近边缘（+在垂直或水平标题之间进行选择的选项，或两者兼而有之）。
Edit2：添加了可滚动div支持，并将其作为示例中的默认值。
如果您不想使用插件，请结合固定标题垂直滚动 （CSS）
tbody{display:block;overflow-y:auto;/*+fixed height set w/jQuery etc*/}
使用固定的第一列水平滚动 （JS）
$('#table-container').scroll(function() {
var _left = $(this).scrollLeft();
$('#table th').css('left', _left); //"stick" the first column to viewport
});
#table-container{overflow-x:scroll;/*+fixed width set*/}
thead, tbody{display:block;}
th {position:relative;left:0;/*gets adjusted with JS above*/}
在这里小提琴，这并不能解决调整大小以适应浏览器尺寸的问题。假设它将在专用窗口中运行，这将是相当微不足道的;如果不是并且它打算在页面中运行，那么保持它整洁将是相当困难的。
祝你好运。
如果你不喜欢使用重载插件，你可以这样做：
创建仅包含固定表头的表
创建一个具有固定宽度（记住滚动条宽度）和高度的div，并设置滚动 Y 方向。在此div 中，您可以放置表的主体。
创建第 3 个也是最后一个表，并将该表放在div 下方，使其看起来像 1 个大表。
<table> HEADER </table>
<div><table> BODY </table></div> (div is scrollable)
<table> Foot </table>
如果您需要使用裸 javascript 动态进行更改，则无需使用 jquery 或其他繁重的插件。
相关文章：
- 根据滚动位置动态更改href
- 在 Ionic 中动态更新滚动区域
- 无限滚动，动态数据按上次修改状态排序
- 滚动到底部后获取动态加载的HTML
- 单页，滚动网站与固定的动态页脚
- 在jquery中滚动动态列表视图
- 动态垂直表&水平滚动粘性标题和固定列
- 动态添加/创建的移动滚动条无法正常工作
- 动态更新地铁列表在水平滚动时查看 (JS/HTML）
- 如何使用 jquery 动态控制滚动条
- 具有固定滚动行和固定滚动列的大型动态大小 html 表
- 使用javascript和动态.js在画布中平滑滚动
- 在 Twitter Bootstrap 3.0 中动态设置弹出框值，并在滚动更新时使用 href
- 动态设置滚动坐标并从这些坐标以200px滚动容差更改DOM元素
- 使用 AJAX 进行动态滚动条划分
- 动态显示除法取决于另一个除法的滚动条位置
- 如果项目溢出，则动态滚动
- 如何使用 jsp 和 servlet 从数据库滚动时动态加载数据
- 如何根据页面滚动动态更改 id
- 显示隐藏的项目内滚动动态
