分页后第一个孩子的 CSS 选择器

Question

如何设置第一个子元素的样式在发生分页符后？

我面临的最终情况是我想对表格的第一行进行不同的样式设置，并且在打印表格时跨越多个页面。我成功地使用 :first-child 来设置第一行的样式。我还成功地避免了行内的分页符。不过，我不知道如何设置表格第二页上第一行的样式。

我熟悉 css 伪类 first-child (http://www.w3schools.com/cssref/sel_firstchild.asp)，也熟悉 css 打印属性 page-break-inside (http://www.w3schools.com/cssref/pr_print_pagebi.asp)。我无法让他们一起玩得很好？

编辑： 添加代码示例

HTML:
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

CSS:
table tr:first-child td { border-top: solid red 2px; }
table tr { page-break-inside: avoid }

Answer 1

好吧，直接回答——你不能随心所欲。

编辑： 哦，看起来我回答了一个更复杂的问题，比如“如何在每个打印页面上添加表头”，但是，无论如何解决方法都是一样的。希望没事。

但是有几个技巧可以做你想做的事。

1) 将表格分成几部分，将表格添加到每个部分并删除边距，这样它看起来就像一张桌子。在css中添加类似：

table {
    page-break-inside: avoid;
    page-break-after: auto;
}

table + table thead {
    display: none;
}

另外不要忘记设置td宽度，因为没有tad的表格可以有不同的宽度。

然后添加打印样式：

@media print {
    table + table thead {
        display: table-column-group;
    }
}

是的，页面上可能会出现重复的标题，但总比没有好。如果你为你的项目找到了很多行，它会看起来像你需要的那样

2) 准备专用下载的可打印版页面，例如WKHTMLTOPDF。因此，您可以很好地捕捉分页符，并添加您需要的内容。此选项提供了最大的输出灵活性，但需要一些时间来获得支持。

3) 用 JS 计算一切。打印你的页面并分析它——向 js 添加一些常量（每页的高度），当有人尝试打印时——计算分页符，找到最接近的元素并添加你需要的内容。

希望你得到答案。 祝你有美好的一天。

Answer 2

我也在寻找一种在分页符上仅将样式应用于表格的第一行和最后一行的方法，但可能适用于不同的用例。

我需要给我的整个表格一个边框，但不是在表格行上，只是在外面。简单的方法是给表格添加边框，但是当出现分页时，边框不会在分页处重绘。

我的解决方案是使用thead 和tfoot，因为这些元素在每次休息时都会重复。这给了我一个遵守分页符的表格周围的完整边框。

您可以根据自己的情况修改此技术。假设您只想更改第一行的样式（并使其在分页符之间保持一致），您只需将该行放在thead 或tfoot 中，具体取决于您想要第一行还是最后一行。您甚至可以使用现有的thead 来执行此操作。只需给每个thead tr 一个class，这样您就知道哪个是主标题，哪个是样式行。

有一些警告。表格页脚必须在其tds 中包含某些内容，否则它不会呈现。我在第一个td 上添加了一个 （意思是“没有中断空间”），然后将td 上的font-size 设置为1px（否则你的底部会有一个明显的间隙）桌子）。字体大小必须直接应用于td。 0 的字体大小也不起作用。它必须是非零的。

示例

此示例适用于我的用例，但您可以对其进行修改。您还可以根据需要使用任意数量的列。为了简单起见，我使用了一个。但是，thead 和 tfoot 的列数必须相同。

.my-table tr {border-left: 1px; border-right: 1px;}
.my-table thead {border-top: 1px;}
.my-table tfoot {border-bottom: 1px;}

// must be applied to the td!!!
.my-table tfoot td {font-size: 1px;}

<table class="my-table">
  <thead><td></td></thead>
  <tbody>
    <tr><td>data</td></tr>
    <tr><td>data</td></tr>
  </tbody>
  <tfoot><td>&nbsp;</td></tfoot>
</table>