Table cell background bleeds through a table with rounded corners

问题

As can be seen on this demo, in which a table is set with round corners (specifically the top-right and bottom-left), those corners are breached by their contained cell's background color.

I tried applying some padding to the table, but that didn't help. Is my only option to add an extra column and row and set their background-color to transparent?

How to fix this using CSS only (no added images or javascript)?

回答1:

Add overflow: hidden; to the table's CSS rule to clip its inner content. The MDN reference states that:

The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.

As tables are considered block level elements, this rule applies.

To overcome inconsistencies with Gecko driven browsers (e.g. Firefox), apply display: inline-block as well.

See the updated demo on jsFiddle.

回答2:

may be this option help you

table thead tr:first-child td:last-child {
    border-radius: 0 1em 0 0;
}

table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 1em;
}

http://jsfiddle.net/ZFYvq/10/

Also, instead of the pseudo classes can use the classes and add them to the desired cell

回答3:

Demo Fiddle

You're better off wrapping the table in a div with the relevant border radius properties set, e.g:

div{
    border-top-right-radius: 1em; 
    border-bottom-left-radius: 1em; 
    overflow:hidden;
}

By setting the display property for the table to anything other than table you are breaking the specific layout rules which apply to table elements, which will produce often unforseen issues, like not working in IE. The above is the only truly cross browser semantic solution.

nb. To remove the thick border at the bottom of the table, add border-bottom:none; to the div class

来源：https://stackoverflow.com/questions/13297153/table-cell-background-bleeds-through-a-table-with-rounded-corners

标签

html

css

css-tables