如何:100%高度表仅滚动tbody

Question

是否可以使用CSS滚动100%高度表的内容而不是标题,只显示tbody内容侧面的滚动条而不是标题行？谢谢!

Answer 1

表格很棘手.我想你想将它们用于语义和后备目的,但它们有点不灵活.

幸运的是,有些人已经想出了不是一个,而是实现可滚动效果的两种好方法....在〜2005年.

http://www.cssplay.co.uk/menu/tablescroll.html

他们仍然需要额外的html标记才能使它成为可能而第二个表有效地使用嵌套表,但是fallback/plain HTML看起来像普通的普通表.

方法#1

带有填充的外部div,为元素创建"字段".内部div使内部表可滚动.该thead表行绝对定位,使其留在机身顶部,同样与页脚完成.因为内部div是overflow: auto和高度定义的,所以表行的其余部分在可分辨区域中内嵌.

方法#2

外表是普通表,页眉和页脚正常设置样式.但是外表的tbody只包含一行,一列,并且在其中有另一个表.此列具有已定义的高度,overflow: auto因此其中的内容(仅包含内容)将在其中滚动.

Answer 2

我希望现在还为时不晚，您还活着，从那时起情况已经有了很大改善:)

您可以使用：

table {
  display: inline-grid;
  grid-template-areas: 
  "head-fixed" 
  "body-scrollable";
}

thead {
  grid-area: head-fixed;
}

tbody {
  grid-area: body-scrollable;
  overflow: auto;
  height: calc(100vh - 55px);
}

在 JSFiddle 上具有 100% 高度和固定标题的可滚动表 (tbody)：http : //jsfiddle.net/gengns/p3fzdc5f/

Answer 3

如果在您的场景中可能的话，一个简单的直接替代方案是将标题放在单独的 div 中，将表格放在另一个具有适当高度的 div 中，并将以下属性应用于该 div。

overflow-x: hidden;
overflow-y: scroll;