如何：100％高度表只滚动tbody [英] How To: 100% Height Table only Scroll tbody

问题描述

是否可以使用CSS滚动100％高度表格的内容而不是标题，只显示滚动条到tbody内容而不是标题行？谢谢！

is it possible to scroll the content of a 100% height table and not the header using CSS and only showing the scroll bar to the side of the tbody content and not the header row? Thanks!

推荐答案

表格很棘手。我想你想使用它们的语义和回退的目的，但他们有点不灵活。

Tables are tricky business. I guess you want to use them for semantic and fallback purposes, but they're somewhat unflexible.

幸运的是，一些已经知道了一个，但2个好的方法实现可滚动effect。in〜2005。

Luckily some already figured out not one, but 2 good methods of achieving scrollable effects.... in ~2005.

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

他们仍然需要额外的html标记以使其成为可能，第二个表有效地使用

They still need extra html markup to make it possible and the second table effectively uses a nested table, but the fallback / plain HTML looks like a normal plain table.

方法1

外部div与填充，为元素创建一个字段。内部div使内表可滚动。 thead 表行是绝对定位的，以使它保持在body的顶部，同样是完成与页脚。因为内部div是 overflow：auto 和一个高度定义的其余表行在可缩放区域内联。

Outer div with padding, to create a 'field' for the elements. Inner div which makes the inner table scrollable. The thead table row is absolutely positioned to make it stay on top of the body, same is done with the footer. Because the inner div is overflow: auto and a height defined the rest of the table rows fall inline in the scollable area.

方法2

外表是一个普通的表格，页脚正常。但是外部表的tbody只包含一行，一列，在其中有另一个表。这个列定义了一个高度，并且 overflow：auto ，因此其中的能力（只有内容）将在其中滚动。

The outer table is a normal table, header and footer are styled normally. But the tbody of the outer table contains only one row, one column and in it it has another table. This column has a height defined and overflow: auto so the able in it (which only has the content) will be scrolled inside it.

这篇关于如何：100％高度表只滚动tbody的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！