How to make a table scrollable

Question

Does anyone know a vanilla way to make a table body scrollable using only html and css?

Obvious solution

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

does not work.

Was this the obvious use of tables?

Am I doing something wrong?

Answer 1

First you need to declare the height, otherwise your table will expand to the corresponding content.

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

EDIT: after clarifying your problem, I edited the fiddle: look at this example or that way . This is pretty hacky and not guaranteed to work with crossbrowser, but may work for your business.

Answer 2

You cannot do this with a table. Wrap the table with div a, give it something like:

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

Answer 3

Do you want something like that?

Pure CSS Scroll Table with Fixed Header (1)

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

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