[ACCEPTED]-CSS3 border-radius on display:table-row element-css-tables
I'm afraid this there is no way to apply 7 border radius on table rows. However, the 6 workaround is pretty simple: just apply 5 the background color and the border radius 4 to the cells.
If you remove the background 3 color from the table rows, and you can add 2 this:
.item > div {
background-color: #ccc;
}
.item > div:first-child {
border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
}
.item > div:last-child {
border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
}
It will work even if you change your 1 class names.
You can see it in action here: http://jsfiddle.net/jaSs8/1/
Maybe the problem is in divContainer class. Try 1 to change the display attribute to table-row.
You also can fix this issue by setting float:left; on 3 the table element. It doesn't effect the 2 behavior of the table flexibility and works 1 like a charm.
table {
float: left;
display: table;
width: 100%;
border-collapse: collapse;
}
tr {
display: table-row;
width: 100%;
padding: 0;
}
td {
font-weight: bold;
background: #fff;
display: table-cell;
border-radius: 10px;
}
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.