Зебра раздели с закругленными углами, не работает в Firefox

Question

У меня есть несколько списков на моем сайте: URL Ссылка

У него зебра раздели фоном. В Chrome я также получаю закругленные углы, которые выглядят красиво, но в Firefox это не работает. Я посмотрел на бесконечный сайт помощи без успеха. Единственное, что я узнал, это то, что закругленные углы не работают, когда "граница-коллапс может рухнуть", но я нашел способ обойти это. Однако - это все равно не работает.... сводит меня с ума...

Это CSS, который я сейчас использую:

* TABLES CODES
--------------------------------------- */

table.zebra {
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate; 



}

.zebra td {
    padding: 10px;
    text-align: left; 


}

.zebra tr td:first-child {
    -moz-border-radius-topleft: 10px;
        -moz-border-radius-bottomleft: 10px;
    -webkit-border-top-left-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

}

.zebra tr td:last-child {
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

}



.zebra tbody tr:nth-child(even) {
    background: #F0F0F0!important;
    color:#000;

}

Answer 1

Попробуйте изменить этот бит CSS:

.zebra tbody tr:nth-child(even) {
    background: #F0F0F0!important;
    color:#000;

}

к этому...

.zebra tbody tr:nth-child(even) td {
    background: #F0F0F0!important;
    color:#000;

}