Table 分页 + table 样式 - 如何在最后显示的行上获得圆边

Question

我的网站上显示了一个 table，它是分页的。我参考了这个问题的第一个答案：来弄清楚如何进行分页。

问题是我的 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;
}

这样做的效果是整个table的每个'corner'都被四舍五入了。我希望分页 table 也有圆角 - 但是，我似乎无法修改分页代码以在底部两个角添加圆角样式。我真的卡住了。

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

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

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

Answer 1

@AndyHoffman 在评论中回答了这个问题。看到这个 fiddle。

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

Table 分页 + table 样式 - 如何在最后显示的行上获得圆边

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

css

jquery

pagination

css-tables