浮动表标题+圆角的副作用

Question

Please refer to this fiddle . While scrolling down, the table cells appear in the rounded corners. How do I hide that?

Explanation

I have a table of data that when scrolled headers stay fixed, but data scrolls (using javascript).

The problem is that my headers have rounded corners and when my table gets scrolled cells appear in the rounded corner area as seen on the image below.

What should I do to avoid this?

Answer 1

Match the background behind the elements to the body background:

thead tr { background: #fff; }

http://jsfiddle.net/Wexcode/CDSdU/

Answer 2

Make the header's parent have a background-color:white; and then make sure that is the fixed element.