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

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

1> 小智..：

---

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

---

如果未在中指定宽度,则解决方案不起作用

---

不幸的是,当你有一个宽表(水平滚动)时,这个方法失败了.你将有两个水平滚动条; 一个用于标题,一个用于数据.

---

为符合(相对)新的Stack Overflow标准,您是否可以编辑此答案以包含链接中的相关位？

2> Vitalii Fedo..：

---

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

3> Jeromy Frenc..：

---

我看到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/

---

谢谢马特,我做了调整.

4> Chris Marast..：

---

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

你的目标浏览器是什么？

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

    
    
    
    
    
    

        

            

              
One
Two
              
            
        
        

            
Data
Data
            
Data
Data
            
Data
Data
            
Data
Data
            
Data
Data
            
Data
Data
            
Data
Data
            
Data
Data
            
Data
Data
            
Data
Data
            
Data
Data
            
Data
Data
            
Data
Data
            
Data
Data
            
Data
Data
        
    
    

---

这曾经在firefox中工作,它是明显的非cludgy代码.但是,在更新版本的Firefox中,它已经崩溃了.

---

这不起作用,因为"溢出"仅适用于"块容器"(http://www.w3.org/TR/CSS21/visufx.html#overflow),而表格框不是"块容器"(http: //www.w3.org/TR/CSS21/visuren.html#block-boxes).

---

`overflow-x:hidden;`和`overflow-y:auto`也有帮助.

5> Javarome..：

---

你需要的是:

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

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

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
}

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

一旦完成,你可以强制列的宽度有两个相同的宽度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
}    

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