6

我最近发现了支持浏览器<thead>在每个页面顶部打印块的 CSS 代码（使用display: table-header-group;in @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;但没有一个关于样式化这些标题组的问题。

4

2 回答 2

4

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

于 2012-08-08T03:54:02.623 回答
0

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

于 2021-04-21T13:56:44.973 回答