固定标题和可滚动正文中的表格在 HTML 角度

Question

在Angular中，我有一个表格，它应该是可滚动的。但是标题应该是固定的。但是滚动标题不是固定的。请帮忙

Answer 1

好吧，要求似乎是您想要一个可滚动的表格正文。不确定在这种情况下，角度是否会使事情变得不同。 可以肯定的是，请看 https://jsfiddle.net/hh6etg6s/的小提琴，如果这符合目的。

.tablediv {
padding:20px;
}
table ,tr td{
border:1px solid red
}
tbody {
display:block;
height:200px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
width:400px;
}

Answer 2

看看 angularjswiki 的这篇文章： https://www.angularjswiki.com/material/mat-table-fixed-sticky-header/

取自那里：

在 Angular 中，要创建一个具有固定标题和可滚动正文的mat-table，我们必须向matHeaderRowDef添加sticky输入

。

Answer 3

在单独的div 中将表的两个实例放在 HTML 中。在顶部容器中，隐藏您的身体。在底部容器中隐藏标题。以可见性执行此操作：折叠;

如果需要隐藏滚动条：

隐藏滚动条