How to build a table with some specifications

Question

Not really sure if that made complete sense, here is another try:

I'm trying to make a table where each row of alternating color has a border radius on either top sides of it, in such a way that the space(or background) created due to border radius is filled by the previous row color. Here is the Css:

table {
  background-color: grey;
  border-radius
  -webkit-border-radius: 10px 10px 0px 0px; 
  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 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;
}

Answer 1

(Works only in Firefox)

Simply let the table cells have the important background-color, and let each row have the same color as the cells in the previous row:

https://jsfiddle.net/svArtist/20rhemuf/

(Some fixes are needed for your header, but it's not too bad

td:first-child, th:first-child {
    border-radius: 10px 0 0 0;
}
td:last-child, th:last-child {
    border-radius: 0 10px 0 0;
}
/* Now set the colors here */
table tr:nth-child(odd) {
    background-color: #bbb;
}
table tr:nth-child(even) {
    background-color: #ABDBEA;
}
table tr:nth-child(even) td {
    background-color: #bbb;
}
table tr:nth-child(odd) td {
    background-color: #ABDBEA;
}

/* fixes for the header, as it is different */
table tr:first-child {
    background-color: transparent;
}
table tr:nth-child(2) {
    background-color: blue;
}