我有三个div。标题,中心和页脚。中央div(gridview)中有一个表,它几乎总是比外部div长。所以我把这个div垂直滚动了。问题是:如何在div向下滚动后显示表头?我可以使用单独的div或表完成此标题并使其固定但表中列的宽度并不总是相同 - 所以我不知道如何在标题中保持列的宽度。任何线索?
答案 0 :(得分:13)
我刚刚整理了一个jQuery插件,它可以完全满足您的需求。它非常小,非常容易实现。
所需要的只是一个包含thead和tbody的表。
您可以使用类名将该表包装在DIV中,并且该表将始终调整大小以适合该div。例如,如果您的div与浏览器窗口一起缩放,那么表格也是如此。滚动时将固定标题。页脚将被固定(如果您启用页脚)。您还可以选择在页脚中克隆标题并将其修复。此外,如果您使浏览器窗口太小而且所有列都不适合......它也会水平滚动(标题也是如此)。
你只需将DIV的类名传递给插件就像这样:$('。myDiv')。fixedHeaderTable({footer:true,footerId:'myFooterId'}); 而插件将完成剩下的工作。 FooterID是页面上包含页脚标记的元素。如果您希望将分页作为页脚,则使用此选项。
如果页面上有多个表格,那么它也适用于您希望拥有固定标题的每个表格。
在此处查看:http://fixedheadertable.mmalek.com/
请记住它仍然是'beta',所以我每天都会添加新功能和错误修复。
支持的浏览器:IE6,IE7,IE8,FireFox,Safari和Chrome
答案 1 :(得分:12)
解决方案非常简单。你需要3个DIV:一个普通的容器(在我的类“外部”的情况下),一个表容器(在我的类“内部”的情况下)和一个DIV,你可以使用jQuery或javaScript克隆一个现有的表(在我的类“标题”的情况下)。
解决方案使用CSS和几行jQuery代码,将“内部”的HTML克隆到“标题”并设置其宽度和高度。支持固定和可变列宽。使用IE8,Firefox 9,Safari和谷歌浏览器进行测试。
以下是示例代码:
$(document).ready(function() {
$('.header').html( $('.inner').html() );
$('.header').css('width', $('.inner table').outerWidth() );
$('.header').css('height', $('.inner table thead').outerHeight() );
});
table {
width:100%;
}
th {
border-top:1px solid #999;
text-align:left;
}
td, th {
border-bottom:1px solid #999;
background-color:#EEE;
}
.outer {
position:relative;
width:500px;
}
.inner {
height:150px;
overflow:auto;
}
.header {
position:absolute;
top:0;
left:0;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="outer">
<div class="inner">
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>2</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>3</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>4</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>5</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>6</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>7</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>8</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>9</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>10</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>11</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>12</td><td>b</td><td>c</td><td>d</td></tr>
</tbody>
</table>
</div>
<div class="header">
</div>
</div>
</body>
答案 2 :(得分:11)
以下是使用javascript的基本解决方案:
function position(table) {
table.rows[0].style.position="absolute";
table.rows[0].style.top="0px";
table.style.marginTop = table.rows[0].clientHeight/1.2;
var widths = Array();
for(var i = 0; i < table.rows[0].cells.length; i++) {
widths[i] = max(table.rows[0].cells[i].clientWidth, table.rows[1].cells[i].clientWidth);
}
for(var row = 0; row < table.rows.length; row++) {
for(var col = 0; col < widths.length; col ++) {
table.rows[row].cells[col].style.width = widths[col] + "px";
}
}
}
function max(num1, num2) { return (num1 > num2) ? num1 : num2; }
答案 3 :(得分:3)
您必须将标头放在可滚动div之外。 div中的所有内容都会滚动。
修改强>
关于宽度,如果你选择一个单独的标题,我可以看到一些解决方案:
我实际上没有尝试过第一次,它可能会让事情过于复杂。如果你对这种效果感到绝望,那就可以尝试了。
我还应该提一下,可能有表格小部件的javascript库已经这样做了。看看他们是怎么做的。
答案 4 :(得分:2)
您需要在表格中添加有关数据表的标题。您可以使用table-layout:fixed来维护列宽。 JavaScript可用于匹配列宽。
答案 5 :(得分:2)
这是一个很好的解决方案(主要是CSS),它使用固定宽度列:http://www.imaputz.com/cssStuff/bulletVersion.html
当单元格内容的宽度超过固定宽度时,这里有一些jQuery代码来修复单元格宽度:
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"
type="text/javascript"></script>
<script>
$(function() {
$('div.tableContainer').each(function() { // for each table
var div = $(this);
var widths = [];
var changed = false;
$('table>*>tr', div).each(function(tr_i) {
$(this).children().each(function(i) {
var w = $(this).width();
if (w > widths[i]) {
widths[i] = w;
changed = true;
}
});
}).each(function(tr_i) {
if (changed)
$(this).children().each(function(i) {
var width = widths[i];
// add some width for scrollbar
if (tr_i == 0 && changed && i == widths.length-1) width += 16;
// insert a div to ensure width
$(this).append('<div style="width:'+width+'px; height:0px"> </div>');
});
});
div.width(div.children('table').width()).css('overflow-x', 'hidden');
});
});
</script>
使用非严格DTD时,IE中的输出有点偏。如果您不能使用标准模式,请调整CSS中的宽度。
请注意,jQuery代码会在最后增加表格宽度,并禁用水平滚动条。你可能想要也可能不想要。
答案 6 :(得分:2)
您可以尝试使用jQuery插件Stupid Fixed Header。该技术基本相同:克隆标题并将其放在表格层的顶部。
答案 7 :(得分:2)
您实际想要做的是使数据表的<tbody>
可滚动,因此<thead>
和<tfoot>
将保持自然固定。
虽然这对FF等人来说是微不足道的:
tbody
{
height: 100px; /* or whatever */
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
}
IE一般都有严重和tbody的复杂问题。它可以用表达式解决,但它非常重要,并且特定于设计。
答案 8 :(得分:1)
我还没有测试过这个,但也许你可以生成表两次,一次在标题中,一次在滚动div中。然后在标题中,使除标题行之外的所有行都不可见。也许用'display:none'或将它们的高度设置为零。
答案 9 :(得分:1)
如果您正在寻找全面的跨浏览器实施,请查看YUI数据表。我相信这是通过创建具有匹配列宽的另一个表来完成的。
修复列宽似乎需要一些技巧。如果我没记错的话,Firefox需要&lt; col /&gt;要存在的标签。
无论如何,YUI DataTable(50k行)中使用了许多技巧。你最好先看看它,然后决定你自己走多远。
答案 10 :(得分:1)
此解决方案使用Firefox和其他Gecko浏览器中的CSS以及IE中的CSS表达式。
http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html
页眉和页脚不会在Opera或Safari / Chrome中保持固定,但整个表格都可滚动,因此可以使用。请注意,在作者的示例中,列的宽度为百分比,但可以删除它们。
如果您想体验Opera / Safari / Chrome支持,请查看tbody display:block并从那里开始。