How can I stop my <table> overlapping the rounded corners of its parent <div>?

I have a <table> with alternate colored rows in a <div> with rounded corners. Whe开发者_开发百科n I scroll vertically , the table overlaps the rounded edges and the edges are not seen rounded.

Is there any solution to maintain the rounded corner?

Give your div a padding value equal to the radius of your rounded corner.

You could set the z-index of your table to be -1 or some other value so that the table corners are below your div when you scroll up. But if you don't want the corners of your table to appear rounded when you scroll up, then padding is your best option.

Use overflow: hidden; in the css definition.