Search code examples
htmlcsscss-tables

Scrollable, Fixed Height Table

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?

Solution

  • 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.