Rounding the corners of an html table

Question

Here is the fiddle

My attempt to round the corners of the tbody element failed.

I managed to round the corners of the tr element in tbody with the following

CSS

 .tr .rounded-corners { height: 225px; width: 250px; display: inline-block; padding: 10px; margin-top: 10px; box-shadow: 2px 2px 7px #888888; border-radius: 7px; cursor: pointer; cursor: hand; } 

However, when I try to make a similar style with tbody , are the corners not rounded?

 .tbody .rounded { background: red; border-radius: 7px; } 

The background looks red.

Answer 1

If your table is set to border-collapse: separate (the default), then the radius of the border may or may not apply to <tbody> , depending on the browser; undefined behavior in specifications.

According to the specifications - CSS-background and borders of the module of the 3rd level (highlighted by me):

The effect of the boundary radius on the internal elements of the table is undefined in CSS3 Backgrounds and borders, but can be defined in the future Specification. CSS3 UAs should ignore the properties of the border radius to the internal elements of the table when the collapse collapses.

For consistent results based on your example, you need to set tbody to display: block as suggested in this answer . This will slightly damage the behavior of the table, but may be useful.

Answer 2

try it.,

 .bodytable { background:blue; border-radius: 7px; display: inline-block; }