如何使用CSS在每个分页表的底部添加边框?

时间:2016-04-04 11:36:43

标签: html css pagination

我在HTML表格中有一个很大的数据列表,从数据库中提供,然后打印输出到PDF。表只是普通的表,有几列,但我使用的样式左右边框显示每个页面上每个表的垂直线,但不是水平像。我使用CSS绘制边框,如下所示:

td {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

我遇到的问题是在表格底部的每个页面上分页(打印为PDF),它没有关闭,所以它看起来是开放的。我想关闭每页表格底部的边框。

我设法使用tfoot绘制最后一行的边框,这很有效,直到我到达最后一页,显然它也在那里绘制它。不要在最后画画,因为我已经在那里做了总结,所以在那里排队并不好。

<thead>...some header...</thead>
<tfoot>
  <tr><td class=myborder>&nbsp;</td></tr>
</tfoot>
<tbody>...list of data (100 rows of tr)...</tbody>

CSS,我在桌面上使用红色作为高光:

.myborder {
  border-top: 1px solid red;
}

所以我的问题是,是否有任何css可以在每个页面结尾处绘制简单的行但不在最后一页?

如果使用tfoot,我已经尝试寻找解决方案,它非常像下面的帖子,但有点不同,我不想在最后一页上显示tfoot,但任何其他页面都是细

How to make TFOOT to show only at the end of the table

提前致谢。

PS。感谢Ben的格式修复,这是我的第一篇文章:)

2 个答案:

答案 0 :(得分:0)

我已经更新了您的问题,格式化时我注意到<td>中至少有一个错位的<tfoot>。您也可以使用<foot>打开,<tfoot>

答案 1 :(得分:0)

你可以使用这样的东西申请除最后一个孩子以外的所有足部。

tfoot:not(:last-child):after {
    border-bottom: 1px solid red;
}

第一个回答,如果有任何错误,请纠正我。