1

So, I think this is a CSS issue more than anything, but basically, the HTML I've provided contains a fixed header table in a reactive layout.
Code: http://jsfiddle.net/JpRQh/10/

There are 3 rows of data, but in IE9, it seems like table rows are crazy high, and the scroll bar hase been disabled.

The example that I followed on fixed header tables: http://www.imaputz.com/cssStuff/bigFourVersion.html has the same problem in IE9.

Any ideas on how to fix it?

EDIT: I promise the table scrolls if there is enough data. But i only included 3 rows for example.

NullVoxPopuli
  • 61,906
  • 73
  • 206
  • 352

1 Answers1

3

This is the rule that causes the trouble in IE. Live example: http://jsfiddle.net/JpRQh/12/

html>body tbody.scrollContent {
    margin-top: 24px;
    padding-top: 8px;
    display: block;
    height: 400px; /* If you delete this rule you will see the table rows return to their normal size */
    overflow: auto;
    width: 100%
}

Styling a scrolling tbody and fixed headers etc. tends to cause a lot of issues with cross-browser compatibility. You might look at this link about cross-browser scrolling tbody.

This however seems to be the best looking cross-browser solution. You will need to inspect the CSS.

tw16
  • 29,215
  • 7
  • 63
  • 64
  • 1
    getting rid of the height: 400 disables the ability to scroll the tbody. I'll look into the other examples though. – NullVoxPopuli Aug 02 '11 at 14:10
  • 1
    The one you say is teh best looking cross-browser doesn't work in IE9. =( – NullVoxPopuli Aug 02 '11 at 14:12
  • and the first example uses two separate tables. – NullVoxPopuli Aug 02 '11 at 14:13
  • 2
    @thelindyhop: I understand what you are saying, but as I said in the answer, cross-browser compatibility is the issue here. There is no easy fix to make it appear how you want. My solution was showing you why the rows became huge. That is just how IE handles setting a `height` on `tbody`. Then the examples are the best ways to get results *close* to what you want. The one I said is the best looking cross-browser DOES work in IE9, it just doesn't look exactly the same as the other browsers, hence my point about cross-browser compatibility not being great for it! – tw16 Aug 02 '11 at 15:26
  • thanks for putting your thoughts down! =D also, idk about the downvote. The internet is a mean place. – NullVoxPopuli Aug 02 '11 at 15:33