Css tbody overflow:auto and scroll bar issue for IE9

HTML & CSS
1

I’m trying to get the auto scroll bar to appear in IE9 for a tbody element. My css works fine in the other browsers I’m testing (Firefox, Chrome and Safari).

The application I’ve built allows the user to add rows to a table. The table grows in height until it reaches 190px. At 190px, the table’s tbody should begin hiding additional rows and incorporate a scroll bar. In IE9, the body continues to grow and grow, never stopping at 190px.

Here’s the snippet in question:


table
{
     width: 420px;
     border-collapse: collapse;
}

/* thead and th (which I don't want to scroll) code here... */

tbody
{
     display: block;
     width: 100%;
     max-height: 190px;
     overflow: auto;
}

Any information on IE conventions related to this issue would be appreciated. Thanks.

2

Hm, maybe instead you could put the table in a div that has overflow instead?

3

Then the header would scroll. Unless you’re saying to put the tbody in a div, but I’m not sure you can do that. Maybe worth a shot though.

I’ve seen lots of forums attempt to address this. I’m wanting to try to use the table and it’s elements correctly first, if they’ll apply across all browsers. What I have above works great, except in IE.

I can create what mimics a table from scratch with divs and such but was hoping to avoid that if there’s a convention to get this done using the table elements.

Thanks. Will keep at it.

4

Yes, sorry, I didn’t read carefully enough that you wanted the header to stay put.