表格分页 + 表格样式 - 如何在最后显示的行上获得圆角边缘

Question

我的网站上显示了一个分页表格。 我引用了这个问题的第一个答案：Show N rows per page in HTML table 来弄清楚如何进行分页。

问题是我的表格是这样设计的：

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;
}

这样做的效果是整个表的每个“角”都是圆的。我希望分页表也有圆角 - 但是，我似乎无法修改分页代码以在底部两个角添加圆角样式。我真的被困住了。

感谢任何帮助！如果您需要更多信息，请告诉我。

这里举个例子：https://jsfiddle.net/hermana/8nou03tc/37/

例如，当我将行数设置为 5 时，我希望显示的最后两行显示为四舍五入。

Answer 1

@AndyHoffman 在 cmets 中回答了这个问题。请参阅此fiddle。

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