每页打印的标题样式

Question

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

然而，我的客户对样式非常挑剔。重新打印的标题组似乎缺少一些原始标题的样式，即 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;”的问题，但没有关于样式化这些标题组的问题。

- Chris

---

你能上传一个完整的例子，说明打印出现问题了吗？ - Jason

正如我在下面的评论中所指出的那样，问题是表格上另一个冲突的样式（具体来说是 border-collapse: collapse）。我只需切换到使用 cellspacing="0"，问题就得到解决了。 - Chris

Answer 1

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

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

火狐浏览器并不需要display: table-header-group这个东西，但其他浏览器可能需要，详见问题CSS：在打印模式下重复表头。

- Jukka K. Korpela

---

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

Answer 2

我遇到了一个问题，即使确认未设置break-inside，表格容器仍无法干净地分页断行。这导致表格无法被完美地分割成多个页面，并且阻止每一页上显示表头，尽管设置了thead {display: table-header-group;}。原因是表格的某个父div已经设置了display: inline-block。移除该设置后，问题得到解决。

- jsantos