修复了滚动时的 html 表格标题
Posted
技术标签:
【中文标题】修复了滚动时的 html 表格标题【英文标题】：Fixed html table header while scrolling 【发布时间】：2011-09-25 22:20:56 【问题描述】：我的表结构如下：
<table>
<thead>
<tr>
<th colspan="4">Current</th>
<th colspan="4">New/Requested</th>
</tr>
<tr>
<th nowrap="nowrap">RSD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">CRD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">Action</th>
<th nowrap="nowrap">Reason</th>
<th nowrap="nowrap">Action Code Status </th>
</tr>
<tbody>
<tr>
<td></td>
<td></td>
.....plenty of rows
</tr>
</tbody>
</thead>
</table>
我正在尝试修复标题，以便向下滚动时它仍然可见。 我看了this post，但无法理解。我怎样才能做到这一点？
【问题讨论】：
检查这个问题***.com/questions/130564/… 但我的表格正文不可滚动，当我滚动页面而不是表格正文时我想要这个 我还在玩这个... @Vivek - 你试过解决方案吗............你在哪个浏览器中工作？ @Vivek - 试试 jquery 插件并接受它是否适合你] 【参考方案1】：我编写了以下代码以实现我的目标（如问题所问）-
这是我写的插件。
(function ($)
$.fn.scrollbarTable = function (i)
var o = ;
if (typeof (i) == 'number') o.height = i;
else if (typeof (i) == 'object') o = i;
else if (typeof (i) == 'undefined') o =
height: 300
return this.each(function ()
var $t = $(this);
var w = $t.width();
$t.width(w - function (width)
var parent, child;
if (width === undefined)
parent = $('<div style="width:50px;height:50px;overflow:auto"><div style="height:50px;"></div></div>').appendTo('body');
child = parent.children();
width = child.innerWidth() - child.height(99).innerWidth();
parent.remove();
return width;
());
var cols = [];
var tableCols = [];
$t.find('thead th,thead td').each(function ()
cols.push($(this).width());
);
$t.find('tr:eq(1) th,thead td').each(function ()
tableCols.push($(this).width());
);
var $firstRow = $t.clone();
$firstRow.find('tbody').remove();
$t.find('thead').remove();
$t.before($firstRow);
$firstRow.find('thead th,thead td').each(function (i)
$(this).attr('width', cols[i]);
);
$t.find('tr:first th,tr:first td').each(function (i)
$(this).attr('width', tableCols[i]);
);
var $wrap = $('<div>');
$wrap.css(
width: w,
height: o.height,
overflow: 'auto'
);
$t.wrap($wrap);
)
;
(jQuery));
使用方法：
$(document).ready(function()
$('table#tabss').scrollbarTable();
希望它能帮助某个地方的人..
感谢大家的支持... :)
【讨论】：
是的......我们必须等待两天才能接受自己的答案......那是你我花了时间接受这个。 :) 与 Sreekesh Okky 相同的问题，table#tabss 是什么？ @Vivek #tabss 是什么？ tabss 是表 ID【参考方案2】：尝试这种方法，但它可能不是最好的方法
<table style="top: 0px; position: fixed; z-index: 1; background-color: White">
<tr>
<th colspan="4">Current</th>
<th colspan="4">New/Requested</th>
</tr>
<tr>
<th nowrap="nowrap">RSD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">CRD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">Action</th>
<th nowrap="nowrap">Reason</th>
<th nowrap="nowrap">Action Code Status </th>
</tr>
</table>
<table>
<tbody>
<tr>
<td></td>
<td></td>
.....plenty of rows
</tr>
</tbody>
</table>
我所做的只是为标题创建了另一个表并给它固定位置
【讨论】：
【参考方案3】：使用css
.fixhead
position:relative
overflow:auto;
并在gridview headerrowstyle标签中或中调用这个类。
【讨论】：
【参考方案4】：CSS部分----
<style type="text/css">
thead tr position:relative;
top: expression(offsetParent.scrollTop);
</style>
html 部分----
<table border="0" cellpadding="0" cellspacing="0" align="center">
<thead>
<tr>
<td ></td>
<td>ID</td>
<td>Name</td>
</tr>
</thead>
<tbody>
//////////code
</tbody>
<tfoot>
////////code
</tfott>
</table>
谢谢
【讨论】：
对不起，我是这个论坛的新手，所以不知道如何将代码粘贴到答案中。请不要介意。【参考方案5】：在 tbody 的 css 中设置溢出：auto。
【讨论】：
【参考方案6】：所以我不得不为我的工作创建一个类似的组件。 （注意：我承认我是用 jQuery 做的，但没有它仍然可以完成。）
我想出的解决方案很相似，我想我会分享它，因为它更简单
http://jsfiddle.net/YYaFr/6/
基本上，您将table 包装在div 中，复制它（表格）并将第一个只是标题表格（通过删除tbody）并将其定位。
<div class="containerdiv">
<table class="headerTable">
<colgroup>
<col /> * number of columns
....
</colgroup>
<thead>
<th></th>
....
</thead>
</table>
<table class="dataTable">
<colgroup>
<col /> * number of columns
....
</colgroup>
<thead>
<th></th>
....
</thead>
<tbody>
<td></td>
....
</tbody>
</table>
</div>
和css
div.containerDiv
height: 300px; // Whatever height you need. can be set inline if you wish
div.containerDiv table.headerTable
position: absolute;
div.containerDiv table.dataTable thead
visibility: hidden; // This gives the header table room so it doesn't hide the first row.
然后 javascript 基本上会创建 colgroups（或者如果需要，您可以在服务器端生成它们。）设置宽度和中提琴。在我看来，这似乎要简单得多，所以继续检查 jsfiddle。
【讨论】：
hmm...这似乎是个好方法..但正如我在你的小提琴中看到的那样..标题边框和单元格边框没有对齐..所以扰乱了桌子的形状......让我知道你想如何解决这个问题。 @Vivek 在 Chrome 和 IE8 中进行了测试，它排成一行。你用的是什么浏览器？ @vivek 我刚刚在 Firefox 中进行了测试，但它没有对齐。与它计算宽度的方式有关吗？它创建 col 元素并设置其宽度的代码它为 chrome 中的边距/边框添加 6 个像素/即，在 Firefox 中这是 6，它是 5。【参考方案7】：我知道我迟到了，但 Mustafa OZCAN 的 jQuery Fixed Table Header Plugin 很棒。只需包含它以及 jQuery 本身，并将其设置为在您的表上工作，如下所示：
<script type="text/javascript">
$(document).ready(function()
$('#YourTable').fixedtableheader();
);
</script>
将#YourTable 替换为您的 HTML 表格的 ID，剩下的工作由插件完成。
【讨论】：
【参考方案8】：唉，我多么羡慕那些开始使用 jQuery 的人。我为那些因应用程序限制而无法加载库的人创建了一个纯 javascript 和 CSS 解决方案。
基本上，CSS 定位表格和表格标题行，并诱使表格表现得像 div。然后 javascript 操纵表格标题行的 CSS 定位和一个“掩码”div，当表格向上滚动时隐藏移动的行（改进是修改 javascript 以检测碰撞并隐藏向上滚动超过标题的行）。
这种方法的缺点是您现在必须设置所有列的宽度。
相关组件有：
<!-- divs with IDs are manipulated with javascript -->
<div class="fixedTableHolder">
<div class="maskHolder">
<div id="mask" class="mask"> </mask>
</div>
<div class="fixedTable">
<div id="theTable" class="theTable">
<!-- here is the table, header row must have an ID -->
<table border="0" cellspacing="5" cellpadding="5">
<tr id="thFixed" class="thFixed">
<td class="col1">Header cell 1</td>
</tr>
<tr>
<td class="col1">regular cell</td>
</tr>
</table>
</div>
</div>
</div>
这是 jsFiddle 中的一个演示：http://jsfiddle.net/deborah/Msvvr/
【讨论】：
【参考方案9】：嗯，希望有人会读到这篇文章，并节省一些时间 :) 我的目标是制作一个小（尽可能小）的 js，它将采用 tableID ，并将标题设置为固定。 它与这里给出的不同之处在于它使用 window.resize 重新计算宽度，因此它允许动态调整表格的大小，并且从一开始就没有使用固定大小。理论上 - 假设可以使用任何表格......（这是我的情况......）
function HeadsUp()
var headers = $("#TheGrid tr").first();
headers.css("margin-top", ((headers.height()+1)*-1)+"px");//edit +1 with what you want...
headers.css("position", "absolute");
function ResizeHeaders()
var grid = $("#TheGrid");
var headers = $("#TheGrid tr").first();
var firstdatarow = $("#TheGrid tr:nth-child(2)");
headers.width(grid.width());
var s = firstdatarow.children("td");
var d = headers.children("th");//replace with td if you use it there
for(i=0; i<s.length; i+=1)
d[i].width = s[i].clientWidth;
$(function ()
HeadsUp();
ResizeHeaders();
);
$( window ).resize(function()
ResizeHeaders();
);
【讨论】：
如果有人像我一样在 SharePoint 中需要这些东西，请将 $(window).resize() 的最后一个绑定替换为 SP.UI.Workspace.add_resized(ResizeHeaders);【参考方案10】：对我有用的最佳选择是将以下 css 属性添加到样式表中的 th 类。
th
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 5;
【讨论】：
它会冻结标题以上是关于修复了滚动时的 html 表格标题的主要内容，如果未能解决你的问题，请参考以下文章