Style a table row with background color and border radius

Question

I have a table row with 2 columns, and I would like to put a background color with a border radius.

 <table> <tfoot> <tr> <td class="d-inline-block ltr font-14 font-weight-bold"> Price:</td> <td class="text-right text-primary"> 1600$ </td> </tr> </tfoot> </table>

without encountering this problem by giving the background color only to tds

Answer 1

 tr td:first-child { border-top-left-radius: 150px; border-bottom-left-radius: 150px; } tr td:last-child { border-top-right-radius: 150px; border-bottom-right-radius: 150px; } td { padding: 12px; background-color: yellow; border: solid 0px #000; } table { border-collapse: collapse; }

 <table> <tfoot> <tr> <td class="d-inline-block ltr font-14 font-weight-bold"> Price: </td> <td class="text-right text-primary"> 1600$ </td> </tr> </tfoot> </table>