html - 每页上打印的样式标题

Question

我最近发现CSS代码支持浏览器打印<thead>每页顶部的 block (使用 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 .