在响应式滚动表中保留表头信息

Question

我在Angular 2中有一个应用程序，里面有数千条记录。当我向下滚动时，我希望我的标题被固定。如何实现相同？

我已经尝试设置头来固定和设置列的最大宽度，但他们都没有工作。由于它是一个Angular应用程序，我想尽可能避免使用JQuery。

在此先感谢。

Answer 1

您可以简单地使用position: fixed;为您的标题。你也可以使用bootstrap Affix插件。

Answer 2

这里是你的表的格式

<table> 
<thead> 
    <th>fname</th> 
    <th>lname</th> 
</thead> 
<tbody> 
<tr> 
    <td>john</td><td>doe</td> 
</tr> 
<tr> 
    <td>john</td><td>doe</td> 
</tr> 
<tr> 
    <td>john</td><td>doe</td> 
</tr> 

</tbody> 
</table> 

这是该表

table tbody, table thead 
{ 
    display: block; 
    border:1px solid red; 
} 

table tbody 
{ 
    overflow: auto; 
    height: 100px; 
} 

th , td 
{ 
    width: 50px; 
} 

这里https://jsfiddle.net/mf6hg9jq/2/