4

http://jsfiddle.net/6zM9T/

I've set the tbody to the following css: 

tbody {
    height:200px;
    overflow:scroll;
    display:block;
}

Everything seems to work, but the rows are no longer using the full width provided. I've tried adding width:100%; but that did nothing. Any ideas?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
  • FWIW, this method of fixing headers/footers doesn't work on all browsers including IE 7/8/9 which is probably a bigger issue. – Tim M. Sep 15 '12 at 20:34
  • 2
    This is an old question on the subject, but as far as I know the answers are still valid: http://stackoverflow.com/questions/130564/i-need-my-html-tables-body-to-scroll-and-its-head-to-stay-put – Tim M. Sep 15 '12 at 20:36
  • @TimMedora is there an accepted practice to get this working in all browsers? – MrBrightside Nov 29 '12 at 17:52
  • @CynicalOptimist - The path of least resistance (and greatest browser compatibility) seems to be 2 tables with a bit of script to keep the width of the headers, columns (and optionally footer) in sync. This is my current approach, and it works on IE7+, FF, Chrome, Safari, and Safari iOS. – Tim M. Nov 29 '12 at 18:09
  • Possible duplicate of [How can I let a table's body scroll but keep its head fixed in place?](https://stackoverflow.com/questions/130564/how-can-i-let-a-tables-body-scroll-but-keep-its-head-fixed-in-place) – Brian Tompsett - 汤莱恩 Dec 24 '18 at 22:37

2 Answers2

0

This is a limitation -- as far as I am concerned -- in the HTML spec. The problem is that if you have a tbody with display: block, it is no longer display:table-row-group, which is what is needed for it to be able to have the rows inside be able to work as rows. Ideally, these would be able to overflow in that display mode, but that's where I find a limitation. The best option is to have an inner table.

Dan Crews
  • 3,067
  • 17
  • 20
0

Put table into div with fixed height and overflow: auto;

Dunot
  • 190
  • 2
  • 8