是否有跨浏览器的CSS/JavaScript技术来显示一个长HTML表,使列标题保持固定在屏幕上,而不随表体滚动。想想微软Excel中的“冻结窗格”效果。
我希望能够滚动表的内容,但总是能够在顶部看到列标题。
是否有跨浏览器的CSS/JavaScript技术来显示一个长HTML表,使列标题保持固定在屏幕上,而不随表体滚动。想想微软Excel中的“冻结窗格”效果。
我希望能够滚动表的内容,但总是能够在顶部看到列标题。
当前回答
博士TL;
如果您的目标是现代浏览器,并且没有奢侈的样式需求:http://jsfiddle.net/dPixie/byB9d/3/…虽然四大版本是相当甜蜜的以及这个版本处理流体宽度好得多。
大家好!
随着HTML5和CSS3的进步,至少对于现代浏览器来说,这是可能的。我提出的稍微有点粗糙的实现可以在这里找到:http://jsfiddle.net/dPixie/byB9d/3/。我已经在FX 25, Chrome 31和IE 10上测试过了…
相关的HTML(在你的文档顶部插入一个HTML5文档类型):
html, body { margin: 0; padding: 0; height: 100%; } section { position: relative; border: 1px solid #000; padding-top: 37px; background: #500; } section.positioned { position: absolute; top: 100px; left: 100px; width: 800px; box-shadow: 0 0 15px #333; } .container { overflow-y: auto; height: 200px; } table { border-spacing: 0; width: 100%; } td+td { border-left: 1px solid #eee; } td, th { border-bottom: 1px solid #eee; background: #ddd; color: #000; padding: 10px 25px; } th { height: 0; line-height: 0; padding-top: 0; padding-bottom: 0; color: transparent; border: none; white-space: nowrap; } th div { position: absolute; background: transparent; color: #fff; padding: 9px 25px; top: 0; margin-left: -25px; line-height: normal; border-left: 1px solid #800; } th:first-child div { border: none; } <section class="positioned"> <div class="container"> <table> <thead> <tr class="header"> <th> Table attribute name <div>Table attribute name</div> </th> <th> Value <div>Value</div> </th> <th> Description <div>Description</div> </th> </tr> </thead> <tbody> <tr> <td>align</td> <td>left, center, right</td> <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td> </tr> <tr> <td>bgcolor</td> <td>rgb(x,x,x), #xxxxxx, colorname</td> <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td> </tr> <tr> <td>border</td> <td>1,""</td> <td>Specifies whether the table cells should have borders or not</td> </tr> <tr> <td>cellpadding</td> <td>pixels</td> <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td> </tr> <tr> <td>cellspacing</td> <td>pixels</td> <td>Not supported in HTML5. Specifies the space between cells</td> </tr> <tr> <td>frame</td> <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td> <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td> </tr> <tr> <td>rules</td> <td>none, groups, rows, cols, all</td> <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td> </tr> <tr> <td>summary</td> <td>text</td> <td>Not supported in HTML5. Specifies a summary of the content of a table</td> </tr> <tr> <td>width</td> <td>pixels, %</td> <td>Not supported in HTML5. Specifies the width of a table</td> </tr> </tbody> </table> </div> </section>
但是如何? !
简单地说,你有一个表头,你通过使它高0px来隐藏它,它还包含了用作固定表头的div。表的容器在顶部留下了足够的空间来允许绝对定位的标题,并且带有滚动条的表如您所期望的那样出现。
上面的代码使用了定位类来确定表的位置(我在弹出式对话框中使用它),但是您也可以通过从容器中删除定位类来在文档流中使用它。
但是…
它并不完美。Firefox拒绝使标题行为0px(至少我没有找到任何方法),但固执地保持它至少为4px…这不是一个大问题,但取决于你的样式,它会混淆你的边界等。
该表还使用了一种伪列方法,其中容器本身的背景色被用作标题div的背景,这是透明的。
总结
总而言之,根据您的需求,可能会有样式问题,特别是边界或复杂的背景。可计算性可能也有问题,我还没有在各种各样的浏览器中检查它(如果你尝试过,请评论你的经验),但我没有发现任何类似的东西,所以我认为无论如何都值得发布…
其他回答
对于那些尝试了Maximilian Hils给出的很好的解决方案,但没有成功地让它在Internet Explorer上工作的人,我遇到了同样的问题(Internet Explorer 11),并找到了问题所在。
在Internet Explorer 11中,样式转换(至少使用translate)在<THEAD>上不起作用。我通过将样式应用到循环中的所有<TH>来解决这个问题。这工作。我的JavaScript代码是这样的:
document.getElementById('pnlGridWrap').addEventListener("scroll", function () {
var translate = "translate(0," + this.scrollTop + "px)";
var myElements = this.querySelectorAll("th");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.transform=translate;
}
});
在我的例子中,表格是ASP.NET中的GridView。起初我认为这是因为它没有<THEAD>,但即使我强迫它有一个,它也不工作。然后我发现了我上面写的东西。
这是一个非常好的简单的解决方案。在Chrome浏览器上它是完美的,在Firefox上有点不稳定,在ie浏览器上就更不稳定了。但总的来说,这是个好办法。
CSS属性position: sticky在大多数现代浏览器中都有很好的支持(我在使用Edge时遇到了问题,见下文)。
这让我们很容易解决固定头文件的问题:
thead th { position: sticky; top: 0; }
Safari需要一个供应商前缀:-webkit-sticky。
对于Firefox,我必须在父元素中添加min-height: 0到1。我忘了为什么要这么做了。
最不幸的是,微软Edge的实现似乎只是半工作。至少,在我的测试中有一些闪烁和不对齐的表单元格。这张桌子仍然可用,但在美学上存在重大问题。
我开发了一个简单的轻量级jQuery插件,用于将格式良好的HTML表转换为具有固定表头和列的可滚动表。
该插件可以很好地匹配固定部分与可滚动部分的像素到像素的定位。此外,您还可以冻结水平滚动时始终显示在视图中的列数。
演示和文档:http://meetselva.github.io/fixed-table-rows-cols/
GitHub存储库:https://github.com/meetselva/fixed-table-rows-cols
下面是带有固定表头的简单表的用法,
$(<table selector>).fxdHdrCol({
width: "100%",
height: 200,
colModal: [{width: 30, align: 'center'},
{width: 70, align: 'center'},
{width: 200, align: 'left'},
{width: 100, align: 'center'},
{width: 70, align: 'center'},
{width: 250, align: 'center'}
]
});
我希望我能早点找到@Mark的解决方案,但在我看到这个SO问题之前,我自己写了一个……
我的是一个非常轻量级的jQuery插件,它支持固定的页眉、页脚、列跨越(colspan)、调整大小、水平滚动,以及滚动开始前可选的显示行数。
jQuery。scrollTableBody (GitHub)
只要你有一个合适的<thead>, <tbody>,和(可选)<tfoot>的表,你所需要做的就是:
$('table').scrollTableBody();
这是一个用于固定表头的jQuery插件。它允许整个页面滚动,当它到达顶部时冻结标题。它与Twitter Bootstrap表一起工作得很好。
GitHub存储库:https://github.com/oma/table-fixed-header
它不只是滚动表内容。看看其他的工具,就像这些答案中的一个。你来决定最适合你的情况。