I am attempting to achieve the following - when the table footer is rendered, I want to remove the border radius from the table cells within the last row inside the table body. I am unsure if the code below will do the trick:
table tbody:not(+ tfoot) tr td {
border-radius: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
}
td {
border: 1px solid;
border-radius: 4px;
background-color: red;
}
table tbody:not(+ tfoot) tr td {
border-radius: 0;
}<table class=with-footer>
<tbody>
<tr><td>Body cell</td></tr>
<tr><td>Body cell</td></tr>
</tbody>
<tfoot>
<tr><td>Footer cell</td></tr>
</tfoot>
</table>I am open to alternative suggestions as well, as I may be making the task more complicated than it needs to be.