Table pagination + table styles - how to get rounded edges on the last displayed row

Question

I've got a table displaying on my site which is paginated. I referenced the first answer on this question: Show N rows per page in HTML table to figure out how to do the pagination.

The problem is that my table is styled like so:

table tr:first-child th:first-child {
    border-top-left-radius: 40px;
}

table tr:first-child th:last-child {
    border-top-right-radius: 40px;
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 40px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 40px;
}

The effect of this is that I each 'corner' of the entire table is rounded. I want the paginated table to also have rounded corners - however, I cannot seem to modify the pagination code to add a rounded style to the bottom two corners. I'm really stuck.

Any help is appreciated! Let me know if you need more information.

Here is a fiddle to give an example: https://jsfiddle.net/hermana/8nou03tc/37/

When I set the number of rows to be 5, for example, I would like the last two rows displayed to show up rounded.

Answer 1

This question was answered in the comments by @AndyHoffman. See this fiddle.

table {
  background-color: black;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;  
}