有没有CSS/JavaScript技术可以显示一个长的HTML表格,让列头固定在屏幕上,第一列与数据一起滚动。
我想要能够滚动表格的内容,但是始终能够看到顶部的列头和左侧的第一列。
如果有jQuery插件那就太好了!如果有帮助的话,我只关心Firefox浏览器。
有没有CSS/JavaScript技术可以显示一个长的HTML表格,让列头固定在屏幕上,第一列与数据一起滚动。
我想要能够滚动表格的内容,但是始终能够看到顶部的列头和左侧的第一列。
如果有jQuery插件那就太好了!如果有帮助的话,我只关心Firefox浏览器。
pranav发布的链接的工作示例:
http://jsbin.com/nolanole/1/edit?html,js,output
提示:在IE 6、7和8(无论兼容模式是否开启)、FF 3和3.5、Chrome 2中进行了测试。不适合屏幕阅读器用户(标题不是内容表的一部分)。
编辑于5/5/14:将示例移动到jsBin。虽然IE和Firefox可能需要调整行高,但仍然可以在当前版本的Chrome、IE和Firefox中使用。
jQuery DataTables插件是实现类似于Excel的固定列和标题的优秀方法。
请注意网站的示例部分和“额外”部分。
http://datatables.net/examples/
http://datatables.net/extras/
“额外”部分提供了用于固定列和固定标题的工具。
固定列
http://datatables.net/extras/fixedcolumns/
(我认为此页面上的示例最适合您的问题。)
固定标题
http://datatables.net/extras/fixedheader/
(包括一个带有全页电子表格样式布局的示例:http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html)
colSpan
和rowSpan
都等于1时,它才能正常工作。 - J. Ed虽然这是一个很老的问题,但我认为这是一个很好的地方来推销我的脚本:
http://code.google.com/p/js-scroll-table-header/
它可以在不需要任何配置的情况下工作,并且非常容易设置。
<table>
<thead>
<tr>
<th>Header1</th>
. . .
</tr>
</thead>
<tbody style="height: 300px; overflow-y: auto">
<tr>
. . .
</tr>
. . .
</tbody>
</table>
如果 <tbody> 的内容高度超过所需高度,它将开始滚动。但是,无论滚动位置如何,标题都将保持固定在顶部。
我创建了一个具有固定页眉、固定页脚、固定左列和固定右列的东西。这只在IE中正常工作。由于大多数用户仍在使用IE,这可能会有所帮助。请在可滚动表格中找到代码。请让我知道您的建议。
同时,我正在努力修复其他浏览器中的列。我会随时向您报告。:-)
虽然不是完美的解决方案,但比这里一些顶级答案更接近我的需求。
有两个不同的表格,一个带有标题,另一个用内容包装在 div 中。
<table>
<thead>
<tr><th>Stuff</th><th>Second Stuff</th></tr>
</thead>
</table>
<div style="height: 600px; overflow: auto;">
<table>
<tbody>
//Table
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
$("#GridHeader table").html($('#<%= GridView1.ClientID %>').html());
$("#GridHeader table tbody .rows").remove();
$('#<%= GridView1.ClientID %> tr:first th').hide();
});
</script>
<div id="GridHeader">
<table></table>
</div>
<div style="overflow: auto; height:400px;">
<asp:GridView ID="GridView1" runat="server" />
</div>
我知道你可以为MSIE做到这一点,而这个有限的例子似乎适用于Firefox(不确定这种技术的可扩展性如何)。
我不知道 YUI DT 是否具有这个功能,但如果它确实具备的话,我也不会感到惊讶。