每页上打印的样式标题答案

【问题标题】：Styling headers printed on each page每页上打印的样式标题
【发布时间】：2012-08-07 15:18:59
【问题描述】：

我最近发现支持浏览器的 CSS 代码在每个页面的顶部打印 <thead> 块（在 @media print {} 中使用 display: table-header-group;）。这大大简化了我的应用程序中用于打印表格的代码。

但是，我的客户对样式非常挑剔。似乎重新打印的表头组缺少一些原始表头的样式，即border-bottom-style 和border-bottom-width 将表头与表体分开。由于这似乎是一个硬性要求，我想要一种能够将这些样式包含在这些标题组中的方法。

我尝试了几种不同的方法来强制 Firefox（我们选择的浏览器）打印这些样式以满足此条件，但这些方法似乎都没有产生预期的结果。我试过的一些例子：

@media print {
    thead {
        display: table-header-group;
        border-bottom-style: solid;
        border-bottom-width: 3px;
    }
}

和

<thead style="border-bottom-style: solid; border-bottom-width: 3px;"></thead>

和

table.class thead {
    border-bottom-style: solid;
    border-bottom-width: 3px;
}

和

table.class th {
    border-bottom-style: solid;
    border-bottom-width: 3px;
}

然后我的问题是：有没有办法在这些重印的标题组上设置样式？还是浏览器只是使用相当简陋的默认表格标题样式（粗体文本）？

如果这个问题已经被问及并回答，请原谅我。我四处搜寻，但找不到有关此特定问题的任何信息。有很多关于 display: table-header-group; 的问题，但没有关于设置这些标题组的样式。

【问题讨论】：

您能否上传一个无法正确打印的完整示例？
正如我在下面的评论中指出的那样，问题是桌面上的另一种冲突风格（特别是border-collapse: collapse）。我刚改用cellspacing="0"，问题就解决了。

标签： html css css-tables

【解决方案1】：

在标题行的单元格上设置边框似乎在 Firefox 14 上可以正常工作：

@media print {
   thead { 
      display: table-header-group;
   }
   thead th {
      border-bottom-style: solid;
      border-bottom-width: 3px;
   }
}

Firefox 并不真正需要 display: table-header-group 的东西，但其他浏览器可能需要，请参阅问题 CSS: Repeat table headers in print mode。

【讨论】：

谢谢！我想我还有其他一些与该样式冲突的 CSS。我已将表格设置为使用border-collapse: collapse，由于某种原因，它允许为第一个标题组打印底部边框，而没有后续的。我将其更改为在<table> 标签中使用cellspacing="0"，这似乎有效。

【解决方案2】：

我遇到了一个问题，即即使在确保未设置 break-inside 之后，表格容器也无法完全破坏。即使设置了thead {display: table-header-group;}，这也阻止了表格被很好地拆分为页面，并且阻止了标题显示在每个页面上。原因是表的父 div 之一设置了display: inline-block。删除它，修复它。

【讨论】：