具有固定滚动行和固定滚动列的大型动态大小的HTML表 [英] Large dynamically sized html table with a fixed scroll row and fixed scroll column
本文介绍了具有固定滚动行和固定滚动列的大型动态大小的HTML表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在网页上显示大型表格，并且需要防止第一列和第一列滚动。我想动态设置此表格的垂直尺寸（在某些静态大小页眉/页脚页面内容），以使其尽可能高，而不强制浏览器窗口具有垂直滚动条。
浏览器窗口\ /
+ ---------------------------------------- ---------------------- + / \
| / \ / \ / \ / \ / \ / \ / \ / \ | fixed static
|网页标题字段和文本| | size
| \ / \ / \ / \ / \ / \ / \ / \ / | __\ / __
| + ----<<< table-scrollbar>>>>>> ---------------- + | / \
| + -------------- + -------- + -------- + -------- + -------- + ------- + | |
|| | | colspan | | |固定| | |
||固定|固定|固定|固定|固定|更多> | | |
| + -------------- + - + - + - + --- + ---- + - + - + - + ------ + ------- ++ | |
||固定| | | | | | | | | | || | |
| + -------------- + - + - + - + --- + ---- + - + - + - + ------ + ------- + t | |
||固定| | | | | | | | | | | a | |
| + -------------- + - + - + - + --- + ---- + - + - + - + ------ + ------- + b | |
||固定| | | | | | | | | | | l | |
| + -------------- + - + - + - + --- + ---- + - + - + - + ------ + ------- + e |设置
||固定| | | | | | | | | | || | dynamic
||多行| | | | | | | | | | | s |大小为
| + -------------- + - + - + - + --- + ---- + - + - + - + -------- + ------- + c | runtime
||固定| | | | | | | | | | | r | |
| + -------------- + - + - + - + --- + ---- + - + - + - + ------ + ------- + o | |
||固定| | | | | | | | | | | l | |
| + -------------- + - + - + - + --- + ---- + - + - + - + ------ + ------- + l | |
||固定| | | | | | | | | | | b | |
|| | | | | | | | | | | | a
| + -------------- + - + - + - + --- + ---- + - + - + - + -------- + ------- + r | |
||固定，moreV | | | | | | | | | | || | |
| + -------------- + - + - + - + --- + ---- + - + - + - + ------ + ------- ++ | __\ / __
| / \ / \ / \ / \ / \ / \ / \ / \ | / \
|网页页脚字段和文本| fixed static
| \ / \ / \ / \ / \ / \ / \ / \ / | | size
+ -------------------------------------------- ------------------ + \ /
这只需要在现代浏览器中使用all / any：html，css，javascript，jquery
重要性顺序：
$
- 复制表格，其中包含许多表单字段，隐藏值，行折叠等
- 第一行：垂直滚动，但可以水平滚动
- 第一列：从水平滚动固定，但可以滚动垂直
- 动态调整此表格的大小以填充静态大小页眉/页脚html
这里是一个滚动条的位置（如我在上面的真棒ascii艺术中所描述的）非常基本的html样本的屏幕，没有任何滚动/大小功能：
<！DOCTYPE html PUBLIC / W3C // DTD XHTML 1.0 Transitional // EN>
< HTML>
< HEAD>
< TITLE>大滚动表示例< / TITLE>
< / HEAD>
< BODY>
< form name =MyFormmethod =POSTaction =>
<！ - static size header junk - ><！ - static size header junk - ><！ - static size header junk - >
< table border =1width =100％cellspacing =1cellpadding =0align =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 =0width =95％cellspacing =1cellpadding =0align =center>
< tr>
< td width =60％align =left> header junk left< / td>
< td width =40％align =right>检查！ < input type =checkboxonchange =alert（'your javascript here'）; value =Yname =checkitout>< / td>
< / tr>
<！ - big table here !! - ><！ - big table here !! - ><！ - big table here！ - ><！ - big table here !! - >
< table border =1width =95％cellspacing =1cellpadding =0align =center>
< tr>
< td>固定可以是长< br>或短< / 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>卷动O< / td>
< / tr>
< tr>
< 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& 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> 1 K< / td>< td> 2 2 K< br>更多..< br> more ..< / td>
< td> 1 L< / td>
< / td> 1< / td>< td> 22 M< / td>< td> 333 M< / 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>固定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& 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我< / td>
< td> 1 J< / td>< td> 2 J< / td>< td 3 J< / td&
< td> 1 K< / td>< td> 2 2 K< br>更多..< br> more ..< / td>
< td> 1 L< / td>
< / td> 1< / td>< td> 22 M< / td>< td> 333 M< / 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>固定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更多...< br& ;更多...< 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> 1 K< / td>< td> 2 2 K< br>更多..< br> more ..< / td>
< td> 1 L< / td>
< / td> 1< / td>< td> 22 M< / td>< td> 333 M< / 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>固定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> ¥b $ b< td> 1 C< / td>
< td> 1 D< / td>< td> 2 D< / td>< td> 3 D< / td>< td> 4 D& 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 H H H H br H H t
< td> 1 I< / td>
< td> 1 J< / td>< td> 2 J< / td>< td 3 J< / td&
< td> 1 K< / td>< td> 2 2 K< br>更多..< br> more ..< / td>
< td> 1 L< / td>
< / td> 1< / td>< td> 22 M< / td>< td> 333 M< / 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< 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& 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> 1 K< / td>< td> 2 2 K< br>更多..< br> more ..< / td>
< td> 1 L< / td>
< / td> 1< / td>< td> 22 M< / td>< td> 333 M< / 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 - > ;<！ - 静态大小页脚垃圾 - >
< table border =1width =100％cellspacing =1cellpadding =0align =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：
- 添加可配置的固定行和列。
- 固定列宽和高度问题
- 减少复杂选择器的使用
用法： b
$ b
$（'＃cTable'）。cTable（{
width：1300，
height：500，
fCols：2，
fRows：2
}）;
DEMO： http://jsfiddle.net/rCuPf/7/embedded/result/ （更新演示）
编辑4：已针对第1列上的colSpan进行了更新。演示： >
编辑3：进行了一些清理和修复： http://jsfiddle.net/rKjk3/22 在IE9，FF和Chrome中测试。 （我现在没有最新的IE来测试）
编辑2：修复IE： http：// jsfiddle .net / rKjk3 / 15 / embedded / result / （查看最新上文）
s> http://jsfiddle.net/rKjk3/11/ （见上文最后）
- 添加了window.resize事件处理程序设置
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 // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd >
< HTML>
< HEAD>
< TITLE>大滚动表示例< / 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/>'）;
//下面的模板更新如何在orig表中
var origTableTmpl = < table border =1cellspacing =1cellpadding =0align =centerwidth =95％>< / table>';
//获取第1行并克隆创建子表
var row1 = this.find（'tr'）。slice（0，o.fRows）.clone（）;
var r1c1ColSpan = 0;
for（var i = 0; i
}
//创建只有r1c1的表，对于两个卷轴都是固定的
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'））;
//创建一个只包含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'）。 {
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'）;
//创建表格，只有第1行不带第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 b 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;
//设置渲染表的宽度和高度
for（var i = 0; i
}
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]）。
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'）。 .colSpan;
return c< = r1c1ColSpan;
}）。remove（）;
}）;
r1.width（this.outerWidth（true））;
for（var i = 1; i
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指数：10; }
.topSBWrapper {position：relative; z指数：10;宽度：100％; }
.SBWrapper {width：100％; overflow：auto; }
td {background-color：white; overflow：hidden; padding：1px; }
< / style>
< / HEAD>
< BODY>
< form name =MyFormmethod =POSTaction =>
< table border =1width =100％cellspacing =1cellpadding =0align =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 =0width =95％cellspacing =1cellpadding =0align =center>
< tr>
< td width =60％align =left> header junk left< / td>
< td width =40％align =right>检查！ < input type =checkboxonchange =alert（'your javascript here'）; value =Yname =checkitout>< / td>
< / tr>
< / table>
<！ - big table here !! - ><！ - big table here !! - ><！ - big table here !! - > <！ - big table here !! - >
< table border =1width =95％cellspacing =1cellpadding =0align =centerid =cTable>
< tr>
< td width =5％colspan =3> fixed可以是长< br>或短< / 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>第二固定标题< / 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>个...< / 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>固定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& 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> 1 K< / td>< td> 2 2 K< br>更多..< br> more ..< / td>
< td> 1 L< / td>
< / td> 1< / td>< td> 22 M< / td>< td> 333 M< / 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>固定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更多...< br& ;更多...< 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> 1 K< / td>< td> 2 2 K< br>更多..< br> more ..< / td>
< td> 1 L< / td>
< / td> 1< / td>< td> 22 M< / td>< td> 333 M< / 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>固定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& 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 H H H H br H H t
< td> 1 I< / td>
< td> 1 J< / td>< td> 2 J< / td>< td 3 J< / td&
< td> 1 K< / td>< td> 2 2 K< br>更多..< br> more ..< / td>
< td> 1 L< / td>
< / td> 1< / td>< td> 22 M< / td>< td> 333 M< / 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& td>
< td> 1 E< / td>< td> 2 E< / td>
< td> 1 F< / td>
< / 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>
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
+--------------------------------------------------------------+ \/
this only needs to work in modern browsers, using all/any: html, css, javascript, jquery
order of importance:
- complex table with many form fields, hidden values, javascript collapsing of rows, etc. which I'll add later
- 1st row will have colspans
- rows will have variable height
- 1st row: fixed from vertical scroll, but can scroll horizontally
- 1st column: fixed from horizontal scroll, but can scroll vertical
- dynamically size this "table" to fill the screen between the static size header/footer html
- location of the scroll bars (as depicted in my awesome ascii art above) isn't critical.
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>
解决方案
Edit 5: - Added configurable fixed Rows and Columns. - Fixed column width and height issues - Reduced usage of complex selectors
Usage:
$('#cTable').cTable({
width: 1300,
height: 500,
fCols: 2,
fRows: 2
});
DEMO: http://jsfiddle.net/rCuPf/7/embedded/result/ (updated demo)
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 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)
- 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.
I have created 2 demo for your requirement.
Sample to show how the rendered html will look like with a simple markup structure. This will allow you to look at the structure that is being rendered and how it is working :)
DEMO: 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)
Full code:
<!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屋！
查看全文
