我有以下表结构：
<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，但无法理解。我怎样才能做到这一点？
答案 0 :(得分：5)
我已经编写了以下代码以实现我的目标（如所讨论的那样） -
这是我写的插件。
(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();
}
希望它会帮助某个人......
感谢你们所有人的支持......：）
答案 1 :(得分：0)
尝试这种方法但它可能不是最好的方法
<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>
我所做的只是为标题创建另一个表并给它固定位置
答案 2 :(得分：0)
使用css
.fixhead
{
position:relative
overflow:auto;
}
并在gridview headerrowstyle标签中或在gridview中调用此类。
答案 3 :(得分：0)
CSS PART ----
<style type="text/css">
thead tr { position:relative;
top: expression(offsetParent.scrollTop);
}
</style>
HTML PART ----
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<thead>
<tr>
<td width="1%"></td>
<td>ID</td>
<td>Name</td>
</tr>
</thead>
<tbody>
//////////code
</tbody>
<tfoot>
////////code
</tfott>
</table>
由于
答案 4 :(得分：0)
在tbody的css中设置overflow：auto。
答案 5 :(得分：0)
所以我必须为我的工作创建一个类似的组件。 （注意：当然我用jQuery做了这个，但没有它就可以完成。）
我提出的解决方案是类似的，我认为我会分享它，因为它更简单
基本上你将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。
答案 6 :(得分：0)
我知道我迟到了，但Mustafa OZCAN的jQuery Fixed Table Header Plugin太棒了。只需包含它，以及jQuery本身，并将其设置为在您的表上工作，如下所示：
<script type="text/javascript">
$(document).ready(function() {
$('#YourTable').fixedtableheader();
});
</script>
将#YourTable替换为HTML表的ID，然后插件完成剩下的工作。
答案 7 :(得分：0)
唉，我多么羡慕那些使用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/
答案 8 :(得分：0)
好吧，希望有人会读这篇文章，并节省一些时间:) 我的目标是制作一个小的（尽可能小的）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();
});
答案 9 :(得分：0)
对我来说最好的选择是在样式表的 th 类中添加以下CSS属性。
th
{
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 5;
}