create curved table that has alternating background color for cell

Question

I want to create a table that has curved edge, blue background color headers and alternating background colors (grey and white) for cells.

This is the css I came up with and this is working for chrome, but then I realized it is not working for IE or firefox. It seems like overflow: hidden is not working in IE or firefox.

.curvetable  tr:nth-child(even) {
  background:#e0e0e0;
}

.curvetable th {  
      border: 1px solid gray;
      background-color: SteelBlue;
      color: white;
      padding: 1em;  
}

.curvetable td{   
      border: 1px solid gray;
      padding: .5em 1em;  
}

.curvetable th, td{
     text-align: left;
     margin: .5em 1em;   

}
.curvetable {
    margin: 1em 0;
    width: 100%;
    background: #FFF;
    color:  #024457;
    overflow: hidden;  
    border-radius: 15px;
} 

I tired to look for examples online but I couldn't find any that has curved edge and alternating background color. Does anyone has any suggestion? thanks

Answer 1

for the curve:

.curvetable tr:last-child td:first-child {
    border-bottom-left-radius: 15px;
}

.curvetable tr:last-child td:last-child {
    border-bottom-right-radius: 15px;
}

for the alternating background colors:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

for the header color:

#customers th {
    background-color: blue;
}