<th> will not scroll horizontally with the rest of the table in IE8 in quirks mode

I have a bug in my program's user interface which can only be recreated in browser mode IE8 and Document type "quirks mode". I have never usually have to work with html/css so I am a little lost.

My code sample is a bit too large to fit comfortably on this page, but can be found here. I forgot to attach the relevant css which can be found here.

At first glance, it appears that the <thead> does not scroll with the table. after a look with IE8 dev tools, I found that the <thead> and <tr> elements are moving with the horizontal scroll bar as they should, but the child element <th> (first seen on line 19) is staying in place.

When I manually change specific attributes of the <th> tag, (e.g. align, text-align), all of a sudden, the table headers will scroll properly. When I try to implement these in the code, they do not fix the problem.

Any help would开发者_运维技巧 be appreciated. Thanks in advance.

Use explicit overflow on the th:

th { overflow: scroll; height:1%; }

Here is the difference:

Overflow is treated by expanding a box. When the content of an element does not fit into the dimensions specified for it (explicitly or implicitly), then overflow: visible (the default) means that the content overflows while the box dimensions are as specified. In Quirks Mode, the dimensions change; this can easily been seen e.g. if the box has a back­ground color or a border.

References

• The table cell nowrap minimum width calculation quirk

• Quirks mode and Strict mode

• What happens in Quirks mode?

• Rendering modes - overflow:visible (quirks)

• IE/Win Unscrollable Content Bug

• IE7 Dehacker