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

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 时，我希望显示的最后两行显示为四舍五入。

标签： jquerycsspaginationcss-tables

Answer 1

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

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