I'm not entirely sure if I explained that clearly, so here's another attempt:
My goal is to create a table where each alternating row has border radius applied to the top sides, filling the space created by the border radius with the color of the previous row. Here is the CSS code I am using:
table {
background-color: grey;
border-radius: 10px 10px 0px 0px;
border-spacing: 0;
}
td, th{
height: 28px;
}
table th{
background-color: blue;
}
table tr th:first-child {
border-radius: 10px 0px 0px 0px;
}
table tr th:last-child {
border-radius: 0px 10px 0px 0px;
}
table tr td:first-child {
width: 200px;
}
table tr:nth-child(odd) {
background-image: url("http://i.imgur.com/WOF6Nqu.png");
background-repeat: no-repeat;
padding-top: 10px;
margin-top: -10px;
}
table tr:nth-child(even) {
background-image: url("http://i.imgur.com/BLcmMtw.png");
background-repeat: no-repeat;
}
table td:nth-child(1),
table td:nth-child(2),
table th:nth-child(1),
table th:nth-child(2) {
border-right: 2px solid white;
}