横向、纵向固定表头的 HTML Table实现

最新推荐文章于 2021-07-03 14:10:11 发布

原创最新推荐文章于 2021-07-03 14:10:11 发布 · 6.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#table #html #class #wrapper #function #c

本文介绍了一种可在浏览器中实现水平和垂直方向固定表头的HTMLTable的方法，适用于处理大型表格数据展示问题，提供了JavaScript代码实现及使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做了一个可配置的多维表效果非常不错，可以支持横向、纵向的多重纬度，数据也可以简单绑定，可以支持纬度的分级如日期的年月日的级别。还可以加入计算纬度，最终生成HTMLTable.可是，由于表格“面积”太大，网页放不下，拖动时表头显示不全，所以需要能横向、纵向固定表头的 HTML Table的实现方法，通过查找觉得以下方法简单实用，但是缺点是只有 IE支持。

<html>

<head>

<title>固定表头和列</title>

<style>

.FixedTitleRow

{

position: relative;

top: expression(this.offsetParent.scrollTop);

z-index: 10;

background-color: #E6ECF0;

}

.FixedTitleColumn

{

position: relative;

left: expression(this.parentElement.offsetParent.scrollLeft);

}

.FixedDataColumn

{

position: relative;

left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);

background-color: #E6ECF0;

}

</style>

</head>

<body>

<div id="scrollDiv" style="width: 300px; overflow: auto; cursor: default; display: inline;

position: absolute; height: 200px;">

<table id='accountTable' width='500' height='230' cellpadding='0' cellspacing='0'

style='table-layout: auto' bordercolor='lightgrey'>

<tbody>

ID0</td>

CK0</td>

Code0</td>

Descirption0</td>

TOL0</td>

<td>

XS0</td>

SS0</td>

<td>

MS0</td>

<td>

DS0</td>

<td>

BS0</td>

<td>

XL0</td>

<td>

ML0</td>

<td>

DL0</td>

<td>

EM0</td>

<td>

BM0</td>

</tr>

<tr>

88</td>

88</td>

88</td>

88</td>

88</td>

<td>

22</td>

<td>

22</td>

<td>

22</td>

<td>

22</td>

<td>

22</td>

<td>

22</td>

<td>

22</td>

<td>

22</td>

<td>

22</td>

<td>

22</td>

</tr>

<tr>

111</td>

111</td>

1111</td>

This is Test</td>

1</td>

<td>

001</td>

<td>

002</td>

<td>

003</td>

<td>

004</td>

<td>

005</td>

<td>

006</td>

<td>

007</td>

<td>

008</td>

<td>

009</td>

<td>

010</td>

</tr>

<tr>

111</td>

111</td>

1111</td>

This is Test</td>

1</td>

<td>

001</td>

<td>

002</td>

<td>

003</td>

<td>

004</td>

<td>

005</td>

<td>

006</td>

<td>

007</td>

<td>

008</td>

<td>

009</td>

<td>

010</td>

</tr>

<tr>

111</td>

111</td>

1111</td>

This is Test</td>

1</td>

<td>

001</td>

<td>

002</td>

<td>

003</td>

<td>

004</td>

<td>

005</td>

<td>

006</td>

<td>

007</td>

<td>

008</td>

<td>

009</td>

<td>

010</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

还有一种封装好的方法 ,但是这种方法不支持纵向表头的固定显示
http://download1.youkuaiyun.com/down3/20070607/07064935343.zip

// Global variables

var container = new Array();

var onResizeHandler;

function scrollbarWidth(){

var w;

if (! document.body.currentStyle) document.body.currentStyle = document.body.style;

if (document.body.currentStyle.overflowY == 'visible' || document.body.currentStyle.overflowY == 'scroll'){

w = document.body.offsetWidth - document.body.clientLeft - document.body.clientWidth;

}else{

win = window.open("about:blank", "_blank", "top=0,left=0,width=100,height=100,scrollbars=yes");

win.document.writeln('scrollbar');

w = win.document.body.offsetWidth - win.document.body.clientLeft - win.document.body.clientWidth;

win.close();

}

return w;

}

function getActualWidth(e){

if (! e.currentStyle) e.currentStyle = e.style;

return e.clientWidth - parseInt(e.currentStyle.paddingLeft) - parseInt(e.currentStyle.paddingRight);

}

function findRowWidth(r){

for (var i=0; i < r.length; i++){

r[i].actualWidth = getActualWidth(r[i]);

}

function setRowWidth(r){

for (var i=0; i < r.length; i++){

r[i].width = r[i].actualWidth;

r[i].innerHTML = '<span style="width:' + r[i].actualWidth + ';">' + r[i].innerHTML + '</span>';

}

function fixTableWidth(tbl){

for (var i=0; i < tbl.tHead.rows.length; i++) findRowWidth(tbl.tHead.rows[i].cells);

findRowWidth(tbl.tBodies[0].rows[0].cells);

if (tbl.tFoot) for (var i=0; i < tbl.tFoot.rows.length; i++) findRowWidth(tbl.tFoot.rows[i].cells);

//tbl.width = '';

for (var i=0; i < tbl.tHead.rows.length; i++) setRowWidth(tbl.tHead.rows[i].cells);

setRowWidth(tbl.tBodies[0].rows[0].cells);

if (tbl.tFoot) for (var i=0; i < tbl.tFoot.rows.length; i++) setRowWidth(tbl.tFoot.rows[i].cells);

}

function makeScrollableTable(tbl,scrollFooter,height){

var c, pNode, hdr, ftr, wrapper, rect;

if (typeof tbl == 'string') tbl = document.getElementById(tbl);

pNode = tbl.parentNode;

fixTableWidth(tbl);

c = container.length;

container[c] = document.createElement('<SPAN style="height: 100; overflow: auto;">');

container[c].id = tbl.id + "Container";

pNode.insertBefore(container[c], tbl);

container[c].appendChild(tbl);

container[c].style.width = tbl.clientWidth + 2 * tbl.clientLeft + scrollbarWidth();

hdr = tbl.cloneNode(false);

hdr.id += 'Header';

hdr.appendChild(tbl.tHead.cloneNode(true));

tbl.tHead.style.display = 'none';

if (!scrollFooter || !tbl.tFoot){

ftr = document.createElement('<SPAN style="width:1;height:1;clip: rect(0 1 1 0);background-color:transparent;">');

ftr.id = tbl.id + 'Footer';

ftr.style.border = tbl.style.border;

ftr.style.width = getActualWidth(tbl) + 2 * tbl.clientLeft;

ftr.style.borderBottom = ftr.style.borderLeft = ftr.style.borderRight = 'none';

}else{

ftr = tbl.cloneNode(false);

ftr.id += 'Footer';

ftr.appendChild(tbl.tFoot.cloneNode(true));

ftr.style.borderTop = 'none';

tbl.tFoot.style.display = 'none';

}

wrapper = document.createElement('<table border=0 cellspacing=0 cellpadding=0>');

wrapper.id = tbl.id + 'Wrapper';

pNode.insertBefore(wrapper, container[c]);

wrapper.insertRow(0).insertCell(0).appendChild(hdr);

wrapper.insertRow(1).insertCell(0).appendChild(container[c]);

wrapper.insertRow(2).insertCell(0).appendChild(ftr);

wrapper.align = tbl.align;

tbl.align = hdr.align = ftr.align = 'left';

hdr.style.borderBottom = 'none';

tbl.style.borderTop = tbl.style.borderBottom = 'none';

// adjust page size

if (c == 0 && height == 'auto'){

onResizeAdjustTable();

onResizeHandler = window.onresize;

window.onresize = onResizeAdjustTable;

}else{

container[c].style.height = height;

}

function onResizeAdjustTable(){

if (onResizeHandler) onResizeHandler();

var rect = container[0].getClientRects()(0);

var h = document.body.clientHeight - (rect.top + (document.body.scrollHeight - rect.bottom));

container[0].style.height = (h > 0) ? h : 1;

}

function printPage(){

var tbs = document.getElementsByTagName('TABLE');

var e;

for (var i=0; i < container.length; i++) container[i].style.overflow = '';

window.print();

for (var i=0; i < container.length; i++) container[i].style.overflow = 'auto';

}

使用方法如下:

<html>

<head>

</head>

</P>

<thead>

<tr>

<th bgcolor=blue style="color: white" colspan=2 align=center>ColBC</th>

<th bgcolor=blue style="color: white" colspan=2 align=center>ColDE</th>

</tr>

<tr>

</tr>

</thead>

<tbody>

<tr><td>A</td><td>BBBBBBBBBBBBBBBBBBBBBBBBB</td><td>C</td><td>D</td><td>E</td><td>F</td></tr>

</tbody>

<tfoot>

<tr>

<td bgcolor=blue style="color: white" colspan=6 align=center>Footer</td>

</tr>

</tfoot>

</table>

<h1 align=right>Some stuff after the table</h1>

<h1 align=center>Some stuff after the table</h1>

<h1 align=left>Some stuff after the table</h1>

</body>

</html>