我已经使用this SO question中的代码成功创建了固定的表格标题,但是我有一些问题使其适应我的页面而我无法弄清楚。我对Javascript / jQuery有点新意,所以请耐心等待一下。
代码依赖浏览器中的scroll事件来检测
THEAD 不在视图范围内,因此它知道何时克隆表格并将克隆的标题放在页面顶部。
但是,我的页面在页面顶部修复了 DIV ,其中包含搜索栏等,如果存在,则固定标头不起作用。因为我需要固定区域,所以我很难找到解决方法。它可能很简单,但我没有看到它。
代码段如下:
function moveScroll() {
var scroll = $(window).scrollTop();
var anchor_top = $("#maintable").offset().top;
var anchor_bottom = $("#bottom_anchor").offset().top;
if (scroll > anchor_top && scroll < anchor_bottom) {
clone_table = $("#clone");
if (clone_table.length === 0) {
clone_table = $("#maintable").clone();
clone_table.attr({
id: "clone"
}).css({
position: "fixed",
"pointer-events": "none",
top: 0
}).width($("#maintable").width());
$("#table-container").append(clone_table);
$("#clone").width($("#maintable").width());
$("#clone").css({
border: "none"
});
$("#clone thead").css({
visibility: "true"
});
$("#clone tbody").css({
visibility: "hidden"
});
var footEl = $("#clone tfoot");
if (footEl.length) {
footEl.css({
visibility: "hidden"
});
}
}
} else {
$("#clone").remove();
}
}
$(window).scroll(moveScroll);
这是一个带有页面精简版的JSFiddle。
如果您移除了#topsection
和#table-container
的CSS部分,您会看到已修复的标头。当这些部分存在时,没有任何作用。
顺便说一句,我还有另一个问题。如果我在表格上使用border-collapse:collapse
来获得漂亮的边框,Firefox无法正确呈现固定标头。它会在顶部呈现一个完整的空表。任何想法如何规避这个?
答案 0 :(得分:1)
我在周末之后回到了这个问题并解决了它。我不敢相信上周我看不到这个!它证明了一双新鲜的眼睛能做什么 我想我会在这里回答,以防其他人想要这个代码。
我更改了其中一个变量来监听主要部分的顶部而不是整个窗口:
var scroll = $(window).scrollTop();
现在:
var scroll = $('#table-container').offset().top;
然后我更改了语句来调用函数:
$(window).scroll(moveScroll);
现在:
$('#table-container').scroll(moveScroll);
最后,我手动将固定标题的顶部设置为130px以匹配顶部的底部。
这是一个小提琴:http://jsfiddle.net/hvRZy/
我仍然无法解决边界崩溃问题尽管如此,如果有人在这方面有任何想法,那将是惊人的。谢谢!
编辑:我设法通过以下CSS
解决了边框问题(还添加了圆角):
table {
border-collapse: separate;
border-spacing: 0px;
}
table tr th, table tr td {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px;
}
table tr th:first-child, table tr td:first-child {
border-left: 1px solid #000;
}
table tr th {
background: #c0c0c0;
border-top: 1px solid #000;
text-align: center;
}
table tr:first-child th:first-child {
border-top-left-radius: 6px;
}
table tr:first-child th:last-child {
border-top-right-radius: 6px;
}
table tfoot tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
table tfoot tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
最后一个小提琴! http://jsfiddle.net/KfxQg/
答案 1 :(得分:0)
您可以使用jQuery TH Float Plugin。如果您想要修复table th
,可以像这样使用它
$("#maintable").thfloat({
attachment : "#maintable",
noprint : false
});