如何创建包含 colspans 的固定表标题行？
Posted
技术标签:
【中文标题】如何创建包含 colspans 的固定表标题行？【英文标题】：How to create fixed table header rows that include colspans? 【发布时间】：2012-08-01 15:44:36 【问题描述】：我有一个从数据库数据创建的大型动态表。我需要列标题行保持固定并根据需要滚动行。
我在网络上尝试了许多脚本，试图让它正常工作。我想在浏览器上保持简单易用，因为有些目标计算机相当蹩脚。
这是我的工作：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample</title>
</head>
<body>
<br><br><br><br>
<table id="A" border="0" cellspacing="0" cellpadding="0" align="center" class="base">
<tr bgcolor='gray'>
<td>
<br><br><br>
need the blue column heading rows to remain fixed, and scroll the green rows:<br>
<table id="XYZ" border="1" cellspacing="0" cellpadding="0" align="center" class="base">
<thead>
<tr>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1a</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1b</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1c</th>
<th style="border-left:medium solid black;" colspan="3" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 2</th>
<th style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 3</th>
<th style="border-left:medium solid black;" colspan="5" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 4<br>more<br>more</th>
<th style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 5</th>
</tr>
<tr>
<th bgcolor="DeepSkyBlue" colspan="3" align="center" valign="middle">Col 1</th>
<th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">B</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">C</th>
<th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center">1</th>
<th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">4-b</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">4-c</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">4-d</th>
<th bgcolor="DeepSkyBlue" align="center" valign="middle">4-e</th>
<th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center">Z</th>
</tr>
</thead>
<tbody>
<tr>
<td bgcolor="PaleGreen" colspan="3" align="center" valign="middle">Col 1<br>more</td>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="PaleGreen" align="center" valign="middle">B</th>
<td bgcolor="PaleGreen" align="center" valign="middle">C</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[1]" size="3"></th>
</tr>
<tr>
<td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
<td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c</td>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="LimeGreen" align="center" valign="middle">B</th>
<td bgcolor="LimeGreen" align="center" valign="middle">C</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[2]" size="3"></th>
</tr>
<tr>
<td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
<td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="PaleGreen" align="center" valign="middle">B</th>
<td bgcolor="PaleGreen" align="center" valign="middle">C</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[3]" size="3"></th>
</tr>
<tr>
<td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
<td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more</td>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="LimeGreen" align="center" valign="middle">B</th>
<td bgcolor="LimeGreen" align="center" valign="middle">C</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[4]" size="3"></th>
</tr>
<tr>
<td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
<td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="PaleGreen" align="center" valign="middle">B</th>
<td bgcolor="PaleGreen" align="center" valign="middle">C</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[5]" size="3"></th>
</tr>
<tr>
<td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
<td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c</td>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="LimeGreen" align="center" valign="middle">B</th>
<td bgcolor="LimeGreen" align="center" valign="middle">C</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[6]" size="3"></th>
</tr>
<tr>
<td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
<td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="PaleGreen" align="center" valign="middle">B</th>
<td bgcolor="PaleGreen" align="center" valign="middle">C</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[7]" size="3"></th>
</tr>
<tr>
<td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
<td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more<br>more</td>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="LimeGreen" align="center" valign="middle">B</th>
<td bgcolor="LimeGreen" align="center" valign="middle">C</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[8]" size="3"></th>
</tr>
<tr>
<td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
<td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="PaleGreen" align="center" valign="middle">B</th>
<td bgcolor="PaleGreen" align="center" valign="middle">C</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[9]" size="3"></th>
</tr>
<tr>
<td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
<td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more<br>more</td>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="LimeGreen" align="center" valign="middle">B</th>
<td bgcolor="LimeGreen" align="center" valign="middle">C</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
<td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
<td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[8]" size="3"></th>
</tr>
<tr>
<td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
<td bgcolor="PaleGreen" align="center" valign="middle">Col 1c<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more</td>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
<td bgcolor="PaleGreen" align="center" valign="middle">B</th>
<td bgcolor="PaleGreen" align="center" valign="middle">C</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
<td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
<td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[9]" size="3"></th>
</tr>
</tbody>
</table>
<br><br><br><br>
</td>
</tr>
</table>
<br><br><br><br><br><br>
</body>
</html>
【问题讨论】：
您能否详细解释一下“我需要列标题行保持固定并在必要时滚动行”是什么意思？ “我需要列标题行保持固定，并在必要时滚动行。”你到底是什么意思？你的意思是顶行不会滚动，但它下面的行会滚动？ @Tom，我的实际表格有 1000 多行绿色行，当您向下滚动屏幕时，我需要两个蓝色标题行保持可见。 我知道这个问题有很大的承诺赏金，但它只是一个更具体的副本：***.com/questions/673153/… @Cypress Frankenfeld，我见过很多像你提到的例子。我的问题是如何使它适用于我的桌子，是的，我将放弃使用我的桌子的工作示例的最大赏金积分。 【参考方案1】：您可以使用相同的 colgroup 设置将标题行与数据行放在单独的表中。
以下在 IE9、FF14.01 和 Chrome 20.0.1132.57 中运行良好。
<table border="1">
<colgroup>
<td >Column 1</td>
<td >Column 2</td>
<td >Column 3</td>
<td style="background-color: gray;"><td>
</colgroup>
</table>
<div style="position: absolute; height:75px; overflow-y:scroll; overflow-x:auto">
<table border="1">
<colgroup>
<td ></td>
<td ></td>
<td ></td>
</colgroup>
<tbody>
<tr>
<td>Row 1 - Cell 1</td>
<td>Row 1 - Cell 2</td>
<td>Row 1 - Cell 3</td>
</tr>
<tr>
// rest omitted, see DEMO for full table
</tr>
</tbody>
</table>
</div>
见DEMO
编辑 -- 2012 年 8 月 3 日
我能够让它工作的唯一方法是使用一些诡计。
我像第一个例子一样分开了标题。但是由于标题中的多个不同宽度的极端自定义，保持所有内容对齐的最可靠方法是将 th 行 also 复制到第二个表中，但里面没有文本。这使它们“不可见”，但强制第二个表中的列按预期对齐。
见DEMO
感觉有点老套，我确信有一个合适的解决方案，但同时它似乎运作良好。
编辑 -- 2012 年 8 月 7 日
有什么方法可以将整个表格“装箱”成 100% 屏幕宽度并更改高度为 height:150px；对某事 更具动态性，例如 $(window).height()-200
肯定有更优雅的方式来做这件事，但我能够让表格更有活力。
宽度不是问题，因为我将总宽度限制在 95% 左右，并将表格硬封顶为标题的 min-width: 600px; 和正文的 min-width: 584px，从而确保表格始终保持一致。
对于我使用jQuery的动态高度，将resize函数绑定到windows resize事件：
$(document).ready(function()
resizeTableHeight();
$(window).on("resize.resizeTableHeight", function()
resizeTableHeight();
);
);
function resizeTableHeight()
var headerHeight = $("#tableHeaderContainer").height();
var documentHeight = $(document).height();
var spacingHeight = 50;
$("#tableBodyContainer").height(documentHeight - headerHeight - spacingHeight);
当您打开小提琴时，小提琴窗口的原始高度很可能会很高，无法看到动态。只需移动分隔线并缩小视图即可查看调整大小的效果。
不要不要在不显示网格时忘记取消绑定该事件，因为它仍然会在每次调整大小时执行。
查看动态网格DEMO
您会注意到某些样式在小提琴的 css（右上角）中，而其他样式则没有。我的 CSS 不是很强大，当我将它们从元素移动到 CSS 区域时，一些样式开始被忽略。我尽我所能进入 CSS 并留下其余的硬编码以不破坏它。我相信每天都在使用 CSS 的人能够为您解决这个问题。
我还根据需要为 CSS 和 jQuery 的一些元素添加了一些 ID。 我想对于 CSS，它可以改用类。我把它留给你。
总结我确信有一种更优雅的方式可以实现您想要的，并且可能一些脚本向导为此提供了插件。在那之前，这似乎有效。还可能发生的情况是，如果在列中输入了大量长数据，则列开始再次错位接近 600 像素，但如上所述，这是一个非常个性化的解决方案，您可能需要为某些宽度添加一些动态计算随着时间的推移使用 jQuery。
编辑 -- 2012 年 8 月 9 日
关于设置我在 cmets 中提到的 td 的宽度。我使用我提到的类解决了第一列中长文本的问题。适用于 IE、FF 和 Chrome。
见DEMO
我使用了 cmets 中提到的逻辑。您可能会发现一个更好的命名约定。我只是使用主列+每个子列的开/关开关。对于第 1 列样式，结果如下：
.col01-000
width: 0px;
.col01-001
width: 75px;
.col01-010, .col01-100
width: 50px;
.col01-011, .col01-101
width: 125px;
.col01-110
width: 100px;
我已经为第一个 td 分配了 col01-100 的类，这意味着 50px。
第二个 td 现在有一个 col01-011 类，表明这个 td 仍然属于第一个主列，但子列的宽度为 2（50px）和 3（75px）。这加起来是 125 像素。
我希望这是有道理的，但如果不是，我很乐意在聊天中继续讨论，并与您一起计算出您想要应用的测量值。
到目前为止，我可以看到测量结果是：
Col01
Col1 = colspan 3 超过 175px 3个子列细分175px如下：50px-50px-75pxCol02
Col2 = colspan 3 超过 100px 3个子列细分100px如下：40px-30px-30pxCol03
Col3 = colspan 1 超过 100 像素 没有子列Col04
Col4 = colspan 5 超过 150 像素 5个子列细分150px如下：30px-30px-30px-30px-30pxCol05
Col5 = colspan 1 超过 100 像素 没有子列【讨论】：
我在网上找到了很多这样的演示。问题是当我试图让它在我的桌子上工作时，他们失败了。我的表格有两个标题行，并使用 colspans，你能把它合并到你的演示中吗？ @KM.：我看看，不过要等到今晚晚些时候才能解决。不过那时我肯定会发布回复。 看起来不错。但是，当表格比屏幕宽时，垂直滚动条会隐藏在屏幕外。有什么办法可以将整个表格“装箱”到屏幕宽度的 100%，并将height:150px; 的高度更改为更动态的东西，例如$(window).height()-200
@KM.：抱歉让您久等了。直到今晚，我才能坐下来专注于此。我编辑了答案并将 DEMO 添加到更动态的网格中。我将表格的总宽度限制为屏幕宽度的 95%，最小宽度约为 600 像素。任何低于 600 的东西都会导致对齐问题，至少现在桌子部件会同步移动。我还使用 jQuery 添加了动态高度计算。希望这能帮助您指明正确的方向。
我正在使用 8 月 3 日的版本，但在 FF 正确包装文本时遇到问题，但 IE 没有，请参阅：jsfiddle.net/pZWkR/11 任何想法？【参考方案2】：
编辑：修复窗口调整大小时的固定位置：
http://jsfiddle.net/eReBn/13/
完整代码：
$(function()
(function($)
$.fn.fTable = function(o)
var tableTmpl = '<table id="XYZ_fixed" border="1" cellspacing="0" cellpadding="0" align="center" class="base"></table>';
this.wrap('<div class="fTable_container" />');
var fc = this.parent();
fc.css('width', this.width() + 18);
this.wrap('<div class="fTable_rContainer" />');
var rc = this.parent();
rc.css('height', o.height);
var fTable = $(tableTmpl);
fTable
.addClass('fTable_fixedHead')
.html(this.find('thead').clone())
.prependTo(rc);
$(window).on('scroll resize', function ()
console.log(isScroll());
if (isScroll())
fTable.css('left', $(this).scrollLeft() * -1);
else
fTable.css('left', '');
);
;
function isScroll()
var root= document.compatMode=='BackCompat'?
document.body : document.documentElement;
return root.scrollWidth>root.clientWidth;
)(jQuery);
$('#XYZ').fTable(
height: 300
);
);
编辑：尝试以下解决方案.. 因为您可以手动添加样式和调整表格。
演示： http://jsfiddle.net/eReBn/12/embedded/result/
手动：
一个。将下面的 CSS 复制到您的样式表中
.fTable_rContainer position: relative; overflow: auto; height: 300px; /* Height of the table */ .fTable_container width: 643px; /* Total width of the table you set + 18px (scroll size) */ .fTable_fixedHead position: fixed;
b.用 div class="fTable_container" 包裹表格
c。复制原始表的thead 部分，并像在 DEMO 中一样移动到新表。
d。将fTable_fixedHead 类添加到新表中
使用一些脚本自动化：
演示： http://jsfiddle.net/eReBn/11/embedded/result/
我尝试使用 2 个表来解决它，
-
原始表（未改动）
在原始表上固定 Header 表（绝对定位）
看看，如果你喜欢，请告诉我。
DEMO
在 Firefox 和 Chrome 中测试。 [今天晚些时候将在其他浏览器上测试]
完整代码@http://jsfiddle.net/eReBn/7/
JS：
$(function()
(function($)
$.fn.fTable = function(o)
/* Preserve the attr list from original table */
var el = this[0], arr = [], it;
for (var i = 0, attrs = el.attributes, l = attrs.length; i < l; i++)
it = attrs.item(i);
if (it.nodeName == 'id')
arr.push(it.nodeName + '="' + it.nodeValue + '_fixed"');
else
arr.push(it.nodeName + '="' + it.nodeValue + '"');
var tableTmpl = '<table ' + arr.join(' ') + '></table>';
/* Wrap it inside div's */
this.wrap('<div class="fTable_container" />');
this.wrap('<div class="fTable_rContainer" />');
var rc = this.parent();
/* Clone the thead and add it to the fixed table head */
$(tableTmpl)
.addClass('fTable_fixedHead')
.html(this.find('thead').clone())
.prependTo(rc);
/* Position the fixed head table on scroll */
rc.scroll(function()
rc.find('.fTable_fixedHead').css('top', $(this).scrollTop());
);
var _that = this;
rc.find('.fTable_fixedHead').css('left', _that.aPosition().left);
/* Position the left on resize*/
$(window).resize(function()
rc.find('.fTable_fixedHead').css('left', _that.aPosition().left);
);
;
/* Position fix for webkit browsers */
jQuery.fn.aPosition = function()
thisLeft = this.offset().left;
thisTop = this.offset().top;
thisParent = this.parent();
parentLeft = thisParent.offset().left;
parentTop = thisParent.offset().top;
return
left: thisLeft - parentLeft,
top: thisTop - parentTop
)(jQuery);
);
用法：
$('#XYZ').fTable(
height: 300
);
【讨论】：
这个运行是否需要很少的客户端处理？在尝试使用我上一个问题的答案时，有时表格太大，浏览器会崩溃。表格有几千行，50多列，每列都有一个checkbox+onchange脚本 @KM。它只是从表中克隆thead 并使用滚动事件。我不认为它会崩溃..但让我试着用数千行设置一个小提琴看看。但这是否接近您想要的？
我似乎有其他解决方案在没有滚动事件或 js 的情况下工作，所以你不必这样做。
@KM。好吧，它更像是手动与自动化。在其他解决方案中，您必须将thead 复制粘贴到单独的表中，并有一个滚动的 div。在我的解决方案中，它是由 javascript 生成的。
我正在用代码生成整个页面，所以复制标题很简单。【参考方案3】：
我们使用DataTables.net 并很好地解决了一个非常相似的问题。这是他们网站上的example，带有高级多行标题。您还可以在子列类别中进行排序。
【讨论】：
我也使用 DataTables。工作得相当好（我偶然发现了一些奇怪的东西），它为你做了很多繁重的工作。不过，在旧浏览器上较大的表格可能需要一些时间。【参考方案4】：我也可以为您提供一个选项。这假定浏览器窗口正在滚动。
这里的想法是复制您的表，并从其中删除除 thead 之外的所有内容。它固定在视口的顶部并隐藏。
当用户滚动到表格顶部时，会显示克隆的表格。我还包含了一个resize 事件来处理对视口宽度的更改。保持固定标题和表格水平对齐有一些小问题，但这不是一个大问题。
这是一个使用您的表格作为源代码的演示（我将很多内联样式移到 CSS 中只是为了让内容更易于阅读）：
jsFiddle DEMO
$(function()
var $window = $(window),
stickyTable = $('#XYZ'),
stickyHeader = stickyTable.clone(true),
tableTop = stickyTable.offset().top,
isSticky = false;
handleScroll();
$window.on(
scroll: handleScroll,
resize: handleResize
);
stickyHeader.find('tbody').remove();
stickyHeader.find('tfoot').remove();
stickyHeader.addClass('sticky-header').appendTo('body');
function handleScroll()
var scrollTop = $window.scrollTop();
if(scrollTop > tableTop && !isSticky)
stickyHeader.css('left',stickyTable.offset().left+'px').show();
isSticky = true;
else if(scrollTop <= tableTop && isSticky)
stickyHeader.hide();
isSticky = false;
function handleResize()
if(isSticky)
stickyHeader.css('left',stickyTable.offset().left+'px');
);
【讨论】：
水平滚动也应该滚动标题，但它保持固定且未对齐。 @jackwanders 知道如何让标题水平滚动吗？这几乎是完美的【参考方案5】：之前写的一些答案很棒！！
我大部分时间都在 Google Chrome 中进行了测试，这得益于出色的 Chrome 开发人员工具，可以即时调试 Javascript 并实时调整 css。
如果您在其中添加了带有克隆功能的 jQuery，您可以实现一个可滚动的表格，而无需将其压缩到页面高度，并且在您想要的任何地方都有一个浮动的表格标题
以下代码将克隆表头：
jQuery(document).ready(function ()
jQuery("body").append("<table class='tableheader' align='center' border='1' width='625' cellspacing='0' cellpadding='0'></table>");
jQuery(".tableheader").append(jQuery(".base2 thead").clone());
然后你需要设置一些静态变量，并捕捉滚动事件：
var headerToMove = jQuery(".tableheader");
var headerOffsetTop = headerToMove.offset().top;
var headerPosition = headerToMove.position();
jQuery(window).scroll(function () scroll_post_header(); );
然后在当前页眉上上下移动页眉，但如果当前页眉滚动到一边，则将其保持在页面顶部。
function scroll_post_header()
var new_position = headerOffsetTop - jQuery(window).scrollTop();
if (new_position < 0) new_position = 0;
if (headerPosition.top != new_position)
headerToMove.css("top",new_position);
//headerToMove.stop().animate( 'top': new_position , 300);
if (jQuery(window).scrollTop() < 15) headerToMove.css("top",headerOffsetTop);
);
现在将一些初始 CSS 添加到将被克隆的标题中。您需要从顶部找到当前标题所在的最佳位置，但即使这也可以通过 jQuery 查询来实现。
.tableheader
position: fixed;
height: 80px;
top: 160px;
left: 2.5%;
z-index: 1000;
完整的工作示例可以在以下位置找到：http://jsfiddle.net/webwarrior/YZ8cJ/142/
希望这在不更改任何 html 的情况下有所帮助。
【讨论】：
【参考方案6】：如果您将.clone() thead 放入表格中，所有列都保持原来的宽度。
更新：我意识到 IE 6 和 7 存在问题并修复了它们。问题是这些版本的 IE 不允许您直接定位 thead。结果，我对其进行了更改，以便它移动 thead tr，但前提是浏览器是 IE
另一个错误是 IE @987654322@ 存在问题。我不确定它是否只是 IE Tester，但我通过使用 @987654323@ 解决了这个问题。
Updated Demo
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
// http://obvcode.blogspot.com/2007/11/easiest-way-to-check-ie-version-with.html
var Browser =
version: function()
var version = 999; // we assume a sane browser
if (navigator.appVersion.indexOf("MSIE") != -1)
// bah, IE again, lets downgrade version number
version = parseFloat(navigator.appVersion.split("MSIE")[1]);
return version;
var $thead = $('#XYZ thead'),
$new_thead = $thead.clone().hide(),
$window = $(window),
distance_from_top = $thead.offset().top,
did_scroll = false; // http://ejohn.org/blog/learning-from-twitter/
// for IE <= 7
var $tr_1, $tr_2;
// add the cloned thead
$thead.after($new_thead);
if( Browser.version() < 8 )
$new_thead.find('tr').css(
'position': 'absolute',
'top': 0,
'margin-left': -1
);
$tr_1 = $new_thead.find('tr:first');
$tr_2 = $new_thead.find('tr:last').css('top', $tr_1.height());
else
$new_thead.css(
'position': 'fixed',
'width': $thead.width(),
'top': 0
);
$window.scroll(function()
if( Browser.version() < 8 )
did_scroll = true;
if( $window.scrollTop() >= distance_from_top )
$new_thead.show();
else
$new_thead.hide();
);
setInterval(function()
if( did_scroll )
did_scroll = false;
$tr_1.css('top', $window.scrollTop());
$tr_2.css('top', $tr_1.height() + $window.scrollTop());
, 250);
</script>
编辑
我没有意识到K.M. 想要一个固定高度的桌子。如果你看我上面的例子，你会发现如果浏览器滚动到表格顶部，表格标题是固定的。但是，据我了解，这不是他/她想要的。
我已在我的 Mac 上的以下浏览器中对此进行了测试。
-
Safari (5.1.7)
火狐 (11.0)
铬 (21.0.1180.75)
我已经在 Windows 7 中对此进行了测试：
-
IE 8 和 9 使用 IE Tester
火狐（5.0.1、6.0.2、7.0.1、8.0.1、10.0.2）
铬 (12.0.742.91)
Safari (5.1.5)
它在 IE 6 和 7 中被破坏，但我没有考虑是否有修复。
Demo
var table = $('#XYZ'),
thead = table.find('thead'),
fixed_thead = thead.clone(),
// create a copy of the original table
fixed_thead_wrapper = $('<table />',
'id': 'fixed_thead_wrapper',
'align': 'center',
'width': table.outerWidth(),
'border': '1',
'cellspacing': 0,
'cellpadding': 0
).insertBefore(table),
// this forces the table to be in a scrollable area
table_wrapper = $('<div />',
'id': 'fixed_table_wrapper',
'height': 300,
css:
'overflow': 'auto'
);
// add the cloned thead to the new table
fixed_thead_wrapper.append(fixed_thead);
// hide the original thead.
// this is a very hackish way of doing this, but I'm not sure of a better way as of right now
table.css(
'position': 'relative',
'top': fixed_thead_wrapper.height() * -1
);
// wrap the original table
table.wrap(table_wrapper);
// line the tables up now that the scrollbar is present
fixed_thead_wrapper.css(
'position': 'relative',
'left': table.offset().left - fixed_thead_wrapper.offset().left
);
【讨论】：
我一直在寻找可以在 IE7 中运行的东西，就是这样。但是在 Chrome、IE8、IE9 中，表格标题在滚动时会水平错位几个像素。任何想法如何排序？【参考方案7】：我一直用这个超级好用的插件，处理起来像$('#tableID').fixedtableheader();一样简单
效果惊人，非常轻巧且灵活。
http://fixedheadertable.com/
【讨论】：
【参考方案8】：查看HTML table with fixed headers?。这是一般问题“如何冻结表头？”的最佳答案
【讨论】：
【参考方案9】：查看Fiddle
这是代码。在所有浏览器中都能正常工作...！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Scrollable Table with Fixed Header</title>
<meta http-equiv="language" content="en-us">
<script type="text/javascript">
function removeClassName (elem, className)
elem.className = elem.className.replace(className, "").trim();
function addCSSClass (elem, className)
removeClassName (elem, className);
elem.className = (elem.className + " " + className).trim();
String.prototype.trim = function()
return this.replace( /^\s+|\s+$/, "" );
function stripedTable()
if (document.getElementById && document.getElementsByTagName)
var allTables = document.getElementsByTagName('table');
if (!allTables) return;
for (var i = 0; i < allTables.length; i++)
if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/))
var trs = allTables[i].getElementsByTagName("tr");
for (var j = 0; j < trs.length; j++)
removeClassName(trs[j], 'alternateRow');
addCSSClass(trs[j], 'normalRow');
for (var k = 0; k < trs.length; k += 2)
removeClassName(trs[k], 'normalRow');
addCSSClass(trs[k], 'alternateRow');
window.onload = function() stripedTable();
</script>
<style type="text/css">
body
background: #FFF;
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10px;
padding: 0
table, td, a
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
h1
font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
h2
font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
h3
font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #008000;
margin: 0 0 15px 0
div.tableContainer
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 756px
html>body div.tableContainer
overflow: hidden;
width: 756px
div.tableContainer table
float: left;
width: 740px
html>body div.tableContainer table
width: 756px
thead.fixedHeader tr
position: relative
html>body thead.fixedHeader tr
display: block
thead.fixedHeader th
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited
color: #FFF;
display: block;
text-decoration: none;
width: 100%
thead.fixedHeader a:hover
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
html>body tbody.scrollContent
display: block;
height: 262px;
overflow: auto;
width: 100%
tbody.scrollContent td, tbody.scrollContent tr.normalRow td
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
tbody.scrollContent tr.alternateRow td
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
html>body thead.fixedHeader th
width: 200px
html>body thead.fixedHeader th + th
width: 240px
html>body thead.fixedHeader th + th + th
width: 316px
html>body tbody.scrollContent td
width: 200px
html>body tbody.scrollContent td + td
width: 240px
html>body tbody.scrollContent td + td + td
width: 300px
</style>
</head><body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" class="scrollTable">
<thead class="fixedHeader">
<tr class="alternateRow">
<th><a href="">Header 1</a></th>
<th><a href="">Header 2</a></th>
<th><a href="">Header 3</a></th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>
</div>
</body></html>
【讨论】：
我发现了很多类似的例子。像那些一样，它适用于简单的表格，但尝试在标题中使用colspan 会失败。
您不只是使用 JQuery 在行上执行 :odd 和 :even 并结合 addClass() 是否有原因？对于这样一个简单的解决方案来说似乎有点矫枉过正。
是的***.com/users/934777/justanotherdeveloper，使用 jQuery 很容易，但我更喜欢 JS，因为我在 GWT 中工作。【参考方案10】：
我有一个想法给你。您将把表分成两个表。其中一个将充当标题，第二个将充当所有单元格和行的其余部分。 诀窍如下： 将两个固定的宽度和高度 div 垂直放置在它们旁边。上一个将加载标题表，而下一个将用于表体。在较低的 div 中，您将设置垂直溢出。通过这种方式，您将获得简单的解决方案，支持您的标题移动数据滚动。
【讨论】：
【参考方案11】：似乎最好的方法是两张桌子。带有标题的外部表，以及一个带有内部表的大行。 div 应该是 css 的溢出：滚动或自动设置高度（通过 css 或 javascript）。您必须在所有列上设置特定的宽度。我认为最好的方法是为每个标题指定一个类，并确保内部表中的相应列具有相同的类。
<table>
<tr><th>...</th></tr>
<tr><td>
<div><inner table></div>
</td></tr>
</table>
查看示例：http://www.cssplay.co.uk/menu/tablescroll.html
【讨论】：
【参考方案12】：非常快速和粗略，但希望你能明白，为什么不直接使用position:fixed 作为主题。
jsfiddle：http://jsfiddle.net/b3S5F/
【讨论】：
我的 FF 14 上的列不对齐以上是关于如何创建包含 colspans 的固定表标题行？的主要内容，如果未能解决你的问题，请参考以下文章
html 表 colspan 行跨度 Piet Mondrian
考虑到行跨度和列跨度，如何从一维数组创建动态 html 表？