如何让桌子的身体滚动但是将头部固定到位？

Question

如何让桌子的身体滚动但是将头部固定到位？

min*_*nty 144 html javascript css html-table

我正在编写一个页面,我需要一个HTML表来维护一个设置的大小.我需要表格顶部的标题始终保持在那里,但无论表格中添加了多少行,我还需要滚动表格的主体.想想一个迷你版的excel.这似乎是一项简单的任务,但我在网上找到的几乎所有解决方案都有一些缺点.我怎么解决这个问题？

Answer 1

小智 53

我必须找到相同的答案.我找到的最好的例子是http://www.cssplay.co.uk/menu/tablescroll.html - 我发现示例#2对我来说效果很好.您必须使用Java Script设置内部表的高度,其余的是CSS.

如果未在<thead>中指定<th>宽度,则解决方案不起作用 (4认同)
不幸的是,当你有一个宽表(水平滚动)时,这个方法失败了.你将有两个水平滚动条; 一个用于标题,一个用于数据. (3认同)
为符合(相对)新的Stack Overflow标准,您是否可以编辑此答案以包含链接中的相关位？ (2认同)

Answer 2

Vit*_*nko 34

我发现DataTables非常灵活.虽然它的默认版本基于jquery,但还有一个AngularJs插件.

Answer 3

Jer*_*nch 12

我看到Sean Haddy 对类似问题的出色解决方案,并冒昧地做了一些编辑:

使用类而不是ID,因此可以在一个页面上为一个多个表重用一个jQuery脚本
添加了对caption,thead,tfoot和tbody等语义HTML表元素的支持
使滚动条可选,因此对于比可滚动高度"更短"的表格不会出现
调整滚动div的宽度,使滚动条向上移动到表的右边缘
制作概念可通过
- 在注入的静态表头上使用aria-hidden ="true"
- 并将原始的thead留在原地,只是隐藏了jQuery并设置 aria-hidden="false"
显示了具有不同大小的多个表的示例

然而,肖恩做了沉重的事.感谢Matt Burland,也指出需要支持tfoot.

请参阅http://jsfiddle.net/jhfrench/eNP2N/

谢谢马特,我做了调整. (3认同)

Answer 4

Chr*_*org 8

您是否尝试过使用thead和tbody,并在tbody上设置固定高度溢出:滚动？

你的目标浏览器是什么？

编辑:它在firefox中运行良好(几乎) - 添加垂直滚动条导致需要一个水平滚动条 - yuck.IE只是将每个td的高度设置为我指定的tbody高度.这是我能想到的最好的:

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table { width:300px; }
    tbody { height:10em;  overflow:scroll;}
    td { height:auto; }
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这曾经在firefox中工作,它是明显的非cludgy代码.但是,在更新版本的Firefox中,它已经崩溃了. (7认同)
这不起作用,因为"溢出"仅适用于"块容器"(http://www.w3.org/TR/CSS21/visufx.html#overflow),而表格框不是"块容器"(http: //www.w3.org/TR/CSS21/visuren.html#block-boxes). (6认同)
`overflow-x:hidden;`和`overflow-y:auto`也有帮助. (2认同)

Answer 5

Jav*_*ome 7

你需要的是:

1)具有有限高度的表体,仅当内容大于滚动窗口时才发生滚动.但tbody无法调整大小,您必须将其显示为block:

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

Run Code Online (Sandbox Code Playgroud)

2)重新同步表头和表体列的宽度,使后者block成为一个不相关的元素.唯一的方法是通过对两者强制执行相同的列宽来模拟同步.

但是,由于tbody它本身就是一个block现在,它不再表现得像table.由于您仍然需要一种table行为来正确显示列,因此解决方案是要求将每个行显示为单独的tables:

thead {         
   display: table;  
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

Run Code Online (Sandbox Code Playgroud)

(请注意,使用此技术,您将无法再跨越行).

一旦完成,你可以强制列的宽度有两个相同的宽度thead和tbody.你不能那样:

单独为每一列(通过特定的CSS类或内联样式),这对每个表实例都是非常繁琐的;
统一所有列(th, td { width: 20%; }例如,如果你有5列),这更实用(不需要为每个表实例设置宽度)但不能用于任何列计数
统一为任何列计数,通过固定的表格布局.

我更喜欢最后一个选项,它需要添加:

thead {
   table-layout: fixed;   // Same layout for all cells
}
tbody tr {
   table-layout: fixed;   // Same layout for all cells
}
th, td {
   width: auto;   // Same width for all cells, if table has fixed layout
}

Run Code Online (Sandbox Code Playgroud)

在这里看一个演示,从这个问题的答案分叉.

归档时间：	17 年，1 月前
查看次数：	219055 次
最近记录：	6 年，9 月前