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;，但没有关于这些标题组的样式。

Answer 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。

Answer 2

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

每页打印的样式标题

2 个答案: