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在评论中回答了这个问题。参见此fiddle。

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

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

1 个答案: