Радиус границы по строке таблицы не работает на Firefox

Question

Я делаю фон из моих строк таблицы закругленным углом. Вот CSS:

<table> 
    <tr> 
     <td> first cell </td> 
     <td> middle cell </td> 
     <td> third cell </td> 
    </tr> 
</table> 

tr:hover { 
    background-color: #ffff00; 
} 
tr:hover td:first-child { 
    border-top-left-radius: 20px; 
    border-bottom-left-radius: 20px; 
} 

tr:hover td:last-child { 
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 20px; 
} 

jsFiddle

Он прекрасно работает на Chrome:

, но он не работает на Firefox:

Что Я делаю неправильно и как я могу исправить это на Firefox?

Answer 1

Вы раскалываете стиль на 2 элемента, и FF этого не понимает.

Фон на тр, и закругленные углы на тд

Возможное решение: применить фон на тд

body { 
 
    margin: 100px; 
 
} 
 

 
td { 
 
    padding: 10px; 
 
} 
 

 
tr:hover td { 
 
    background-color: #ffff00; 
 
} 
 
tr:hover td:first-child { 
 
    border-top-left-radius: 20px; 
 
    border-bottom-left-radius: 20px; 
 
} 
 

 
tr:hover td:last-child { 
 
    border-top-right-radius: 20px; 
 
    border-bottom-right-radius: 20px; 
 
}

<table> 
 
    <tr> 
 
     <td> first cell </td> 
 
     <td> middle cell </td> 
 
     <td> third cell </td> 
 
    </tr> 
 
</table>