我需要在网页上显示一个大表，并且需要阻止第一列和第一行滚动。我想动态设置此表的垂直大小（在某些表之间）静态大小页眉/页脚页面内容）使其尽可能高，而不强制浏览器窗口有垂直滚动条。
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
重要性顺序：
这是一个非常基本的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>
答案 0 :(得分：35)
编辑5： - 添加了可配置的固定行和列。 - 修正了列宽和高度问题 - 减少复杂选择器的使用
<强>用法：
$('#cTable').cTable({
width: 1300,
height: 500,
fCols: 2,
fRows: 2
});
DEMO： 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/ （见上文最新内容）
rightContainer的宽度，以便在调整大小时增加实际表的宽度。SBWrapper上的固定宽度，以便它可以充分利用容器内的可用空间。我已根据您的要求创建了2个演示。
示例以显示使用简单标记结构呈现的html的外观。这将允许您查看正在呈现的结构及其工作方式:)
DEMO： http://jsfiddle.net/GmJ22/7/
带有已发布标记的实际演示。代码只是一个粗略的版本，可能需要一些清理。现在您可以配置表格的宽度和高度。我发布它，以便您可以看看并给我一些反馈。
DEMO： http://jsfiddle.net/rKjk3/10/embedded/result/ （见下文修正版）
完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD>
<TITLE>big scrolling table example</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$.fn.cTable = function(o) {
this.wrap('<div class="cTContainer" />');
this.wrap('<div class="relativeContainer" />');
//Update below template as how you have it in orig table
var origTableTmpl = '<table border="1" cellspacing="1" cellpadding="0" align="center" width="95%" ></table>';
//get row 1 and clone it for creating sub tables
var row1 = this.find('tr').slice(0, o.fRows).clone();
var r1c1ColSpan = 0;
for (var i = 0; i < o.fCols; i++ ) {
r1c1ColSpan += this[0].rows[0].cells[i].colSpan;
}
//create table with just r1c1 which is fixed for both scrolls
var tr1c1 = $(origTableTmpl);
row1.each(function () {
var tdct = 0;
$(this).find('td').filter( function () {
tdct += this.colSpan;
return tdct > r1c1ColSpan;
}).remove();
});
row1.appendTo(tr1c1);
tr1c1.wrap('<div class="fixedTB" />');
tr1c1.parent().prependTo(this.closest('.relativeContainer'));
//create a table with just c1
var c1= this.clone().prop({'id': ''});
c1.find('tr').slice(0, o.fRows).remove();
c1.find('tr').each(function (idx) {
var c = 0;
$(this).find('td').filter(function () {
c += this.colSpan;
return c > r1c1ColSpan;
}).remove();
});
var prependRow = row1.first().clone();
prependRow.find('td').empty();
c1.prepend(prependRow).wrap('<div class="leftSBWrapper" />')
c1.parent().wrap('<div class="leftContainer" />');
c1.closest('.leftContainer').insertAfter('.fixedTB');
//create table with just row 1 without col 1
var r1 = $(origTableTmpl);
row1 = this.find('tr').slice(0, o.fRows).clone();
row1.each(function () {
var tds = $(this).find('td'), tdct = 0;
tds.filter (function () {
tdct += this.colSpan;
return tdct <= r1c1ColSpan;
}).remove();
});
row1.appendTo(r1);
r1.wrap('<div class="topSBWrapper" />')
r1.parent().wrap('<div class="rightContainer" />')
r1.closest('.rightContainer').appendTo('.relativeContainer');
$('.relativeContainer').css({'width': 'auto', 'height': o.height});
this.wrap('<div class="SBWrapper"> /')
this.parent().appendTo('.rightContainer');
this.prop({'width': o.width});
var tw = 0;
//set width and height of rendered tables
for (var i = 0; i < o.fCols; i++) {
tw += $(this[0].rows[0].cells[i]).outerWidth(true);
}
tr1c1.width(tw);
c1.width(tw);
$('.rightContainer').css('left', tr1c1.outerWidth(true));
for (var i = 0; i < o.fRows; i++) {
var tr1c1Ht = $(c1[0].rows[i]).outerHeight(true);
var thisHt = $(this[0].rows[i]).outerHeight(true);
var finHt = (tr1c1Ht > thisHt)?tr1c1Ht:thisHt;
$(tr1c1[0].rows[i]).height(finHt);
$(r1[0].rows[i]).height(finHt);
}
$('.leftContainer').css({'top': tr1c1.outerHeight(true), 'width': tr1c1.outerWidth(true)});
var rtw = $('.relativeContainer').width() - tw;
$('.rightContainer').css({'width' : rtw, 'height': o.height, 'max-width': o.width - tw});
var trs = this.find('tr');
trs.slice(1, o.fRows).remove();
trs.slice(0, 1).find('td').empty();
trs.each(function () {
var c = 0;
$(this).find('td').filter(function () {
c += this.colSpan;
return c <= r1c1ColSpan;
}).remove();
});
r1.width(this.outerWidth(true));
for (var i = 1; i < c1[0].rows.length; i++) {
var c1Ht = $(c1[0].rows[i]).outerHeight(true);
var thisHt = $(this[0].rows[i]).outerHeight(true);
var finHt = (c1Ht > thisHt)?c1Ht:thisHt;
$(c1[0].rows[i]).height(finHt);
$(this[0].rows[i]).height(finHt);
}
$('.SBWrapper').css({'height': $('.relativeContainer').height() - $('.topSBWrapper').height()});
$('.SBWrapper').scroll(function () {
var rc = $(this).closest('.relativeContainer');
var lfW = rc.find('.leftSBWrapper');
var tpW = rc.find('.topSBWrapper');
lfW.css('top', ($(this).scrollTop()*-1));
tpW.css('left', ($(this).scrollLeft()*-1));
});
$(window).resize(function () {
$('.rightContainer').width(function () {
return $(this).closest('.relativeContainer').outerWidth() - $(this).siblings('.leftContainer').outerWidth();
});
});
}
$('#cTable').cTable({
width: 1300,
height: 500,
fCols: 2,
fRows: 2
});
});
</script>
<style>
.cTContainer { overflow: hidden; padding: 2px; }
.cTContainer table { table-layout: fixed; }
.relativeContainer { position: relative; overflow: hidden;}
.fixedTB { position: absolute; z-index: 11; }
.leftContainer { position: absolute; overflow: hidden; }
.rightContainer { position: absolute; overflow: hidden; }
.leftSBWrapper { position: relative; z-index: 10; }
.topSBWrapper { position: relative; z-index: 10; width: 100%; }
.SBWrapper { width: 100%; overflow: auto; }
td { background-color: white; overflow: hidden; padding: 1px; }
</style>
</HEAD>
<BODY>
<form name="MyForm" method="POST" action="">
<table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
<tr>
<td width="35%" align="left">header junk left</td>
<td >- HEADER JUNK MIDDLE -</td>
<td width="35%" align="right">header junk right</td>
</tr>
</table>
<br />
<table border="0" width="95%" cellspacing="1" cellpadding="0" align="center">
<tr>
<td width="60%" align="left">header junk left</td>
<td width="40%" align="right">check it out! <input type="checkbox" onchange="alert('your javascript here');" value="Y" name="checkitout"></td>
</tr>
</table>
<!-- big table here!!--><!-- big table here!!--><!-- big table here!!--><!-- big table here!!-->
<table border="1" width="95%" cellspacing="1" cellpadding="0" align="center" id="cTable" >
<tr>
<td width="5%" colspan="3">fixed can be long<br>or short</td>
<td width="9%" colspan="4">scroll A</td>
<td width="7%" colspan="2">scroll B</td>
<td width="3%">scroll C</td>
<td width="9%" colspan="4">scroll D</td>
<td width="7%" colspan="2">scroll E</td>
<td width="3%">scroll F</td>
<td width="9%" colspan="4">scroll G</td>
<td width="7%" colspan="2">scroll H</td>
<td width="3%">scroll I</td>
<td width="9%" colspan="4">scroll J</td>
<td width="7%" colspan="2">scroll K</td>
<td width="3%">scroll L</td>
<td width="9%" colspan="4">scroll M</td>
<td width="7%" colspan="2">scroll N</td>
<td width="3%">scroll O</td>
</tr>
<tr>
<td width="5%" colspan="3">2nd fixed header</td>
<td width="9%" colspan="4">scroll 2A</td>
<td width="7%">scroll 2B-1</td>
<td width="7%">scroll 2B-2 </td>
<td width="3%">scroll 2C</td>
<td width="9%" colspan="4">scroll 2D</td>
<td width="7%" colspan="2">scroll 2E</td>
<td width="3%">scroll 2F</td>
<td width="9%" colspan="4">scroll 2G</td>
<td width="7%" colspan="2">scroll 2H</td>
<td width="3%">scroll 2I</td>
<td width="9%" colspan="4">scroll 2J</td>
<td width="7%" colspan="2">scroll 2K</td>
<td width="3%">scroll 2L</td>
<td width="9%" colspan="4">scroll 2M</td>
<td width="7%" colspan="2">scroll 2N</td>
<td width="3%">scroll 2O</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>1 1 1 1 1 A</td>
<td>2 2 2 2 2 A</td>
<td>3 3 3 3 3 A</td>
<td>4 4 4 4 4 A</td>
<td>1 B</td>
<td>2 B</td>
<td >1 C</td>
<td>1 D</td>
<td>2 D</td>
<td>3 D</td>
<td>4 D<br>more...</td>
<td>1 E</td>
<td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td>
<td>2 2 G</td>
<td>3 G</td>
<td>4 4 4 4 G</td>
<td>1 H</td>
<td>222 H</td>
<td >1 I</td>
<td>1 J</td>
<td>2 J</td>
<td>3 J</td>
<td>4 J</td>
<td>1 K</td>
<td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td>
<td>22 M</td>
<td>333 M</td>
<td>4444 M</td>
<td>1 N</td>
<td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
<tr>
<td colspan="2">fixed 3</td>
<td>3</td>
<td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
<td>1 B</td><td>2 B</td>
<td >1 C</td>
<td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
<td>1 E</td><td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
<td>1 H</td><td>222 H</td>
<td >1 I</td>
<td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
<td>1 K</td><td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
<td>1 N</td><td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
<tr>
<td colspan="3">fixed 4</td>
<td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
<td>1 B</td><td>2 B</td>
<td >1 C</td>
<td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...<br>more...<br>more...<br>more...</td>
<td>1 E</td><td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
<td>1 H</td><td>222 H</td>
<td >1 I</td>
<td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
<td>1 K</td><td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
<td>1 N</td><td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
<tr>
<td colspan="3">fixed 5</td>
<td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
<td>1 B</td><td>2 B</td>
<td >1 C</td>
<td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
<td>1 E</td><td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
<td>1 H</td><td>222 H<br>H<br>H<br>H<br>H</td>
<td >1 I</td>
<td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
<td>1 K</td><td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
<td>1 N</td><td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
<td>1 B</td><td>2 B</td>
<td >1 C</td>
<td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
<td>1 E</td><td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
<td>1 H</td><td>222 H</td>
<td >1 I</td>
<td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
<td>1 K</td><td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
<td>1 N</td><td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
</table>
<br />
<!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk-->
<table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
<tr>
<td width="35%" align="left">footer junk left</td>
<td >- FOOTER JUNK MIDDLE -</td>
<td width="35%" align="right">footer junk right</td>
</tr>
</table>
</form>
</BODY>
</HTML>
答案 1 :(得分：15)
我同意@FedericoGiust's answer;但既然你要求更多细节......
<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>
您需要添加一行虚拟列标题，以便Datatables能够处理colspans。
在jsfiddle上查看。
答案 2 :(得分：11)
答案 3 :(得分：9)
使用普通表，它只会改变标题单元格（不删除，复制或不在表格元素注入之外）。这样做的好处是可以在任何单元格中允许任何维度的任何内容（+允许动态修改该内容）。
查看实际操作：fullpage.html，overflow_scroll.html，fullpage_untouched.html。
垂直和水平th单元格在滚动时应保持可见并对齐。
此解决方案不使用任何框架。随意使用jquery或prototype（或任何其他框架）替换现有的帮助程序（滚动偏移）。
在对表格内容进行动态更改时，您应该添加代码挂钩来调用_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中，并使用_table_make_fixed_header_reposition的滚动偏移量在DIV内进行调整。
修改：更新代码，使表格尽可能靠近边缘，当表格移出视口时（+选项可在垂直或水平标题之间选择，或两者兼而有之）。
Edit2 ：添加了可滚动的div支持，并将其设为示例中的默认值。
答案 4 :(得分：6)
如果您不想使用插件，请结合固定标题垂直滚动（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*/}
Fiddle'd here，这并不涉及调整大小以适应浏览器维度。假设它将在专用窗口中运行，那将是相当微不足道的;如果不是，而且它打算在页面内运行，那么保持整洁是非常困难的。
祝你好运。答案 5 :(得分：3)
如果你不喜欢使用重载插件，你可以这样做：
创建仅包含固定表格标题的表
创建一个固定宽度的div（记住滚动条宽度）和高度并设置滚动Y方向。在这个div中你放置桌子的主体。
创建第3个和最后一个表，并将表放在div下面，使其看起来像一个大表。
<table> HEADER </table>
<div><table> BODY </table></div> (div is scrollable)
<table> Foot </table>
如果你需要动态地使用裸javascript进行更改，则不需要使用jquery或其他重型插件。