如何使表格可滚动

Does anyone know a vanilla way of making the body of a table scrollable using only html and css?

有没有人知道一种使用html和css使表格的主体可滚动的香草方式?

The obvious solution

明显的解决方案

tbody {
    height: 200px;
    overflow-y: scroll;
}

does not work.

不起作用。

Wouldnt this be the obvious use of tables?

这不是表的明显用法吗?

am I doing something wrong?

难道我做错了什么?

3 个解决方案

#1

You need to declare a height first, else your table will expand to the according with of it's content.

您需要先声明一个高度,否则您的表将根据其内容进行扩展。

table{
   overflow-y:scroll;
   height:100px;
   display:block;
}

EDIT: after clarifying your problem i edited the fiddle: check out this Example or that way. It's rather hacky and not quaranteed to work crossbrowser but might work for your case.

编辑:澄清你的问题后,我编辑了小提琴:看看这个例子或那样。这是相当hacky而不是保证工作crossbrowser但可能适合你的情况。

#2

You can't do that with a table. Wrap the table with a div a give it something like:

你不能用桌子做到这一点。用div包裹表格给它类似于:

div.wrapper {
    overflow:hidden;
    overflow-y: scroll;
    height: 100px; // change this to desired height
}

#3

Do you want somthing like this ?

你想要这样的东西吗?

Pure CSS Scrollable Table with Fixed Header (1)

带固定标题的纯CSS可滚动表(1)

http://anaturb.net/csstips/sheader.htm

http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html

#1