создать изогнутую таблицу с чередующимся цветом фона для ячейки

Question

Я хочу создать таблицу с изогнутым краем, заголовками синего цвета фона и чередующимися цветами фона (серый и белый) для ячеек.

Это CSS, который я придумал, и он работает для Chrome, но потом я понял, что он не работает для IE или Firefox. Похоже, переполнение: скрытый не работает в IE или 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;
} 

Мне надоело искать примеры в Интернете, но я не смог найти ни одного, у которого были бы изогнутые края и чередующийся фоновый цвет. У кого-нибудь есть предложения? спасибо

Answer 1

для кривой:

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

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

для чередующихся цветов фона:

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

для цвета заголовка:

#customers th {
    background-color: blue;
}