打印时 Html 表格标题被切断答案

【问题标题】：Html table thead gets cut off when printing打印时 Html 表格标题被切断
【发布时间】：2017-01-03 07:20:06
【问题描述】：

我正在使用 Firefox 并试图允许清晰打印正在显示的表格。这是我的代码。

<style type="text/css">
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #eee;
}

@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}

@media print {
a[href]:after {
content: none !important;
  }
}
</style>
<body>
<div>
<table class="header">
<thead>
<TR>
   <TH>x</TH>
</TR>
</thead>
<TR>
   <TD>x</TD>
</TR>

我的代码中有更多的行和列，但我没有包含它们。 <thead> 在 Firefox 中可以正常工作，但是当我打印它时，该行会被打印机稍微切断，因为它靠近页面顶部。我怎样才能添加填充或其他东西，以便打印机不会切断任何东西？

这是一些我已经尝试过但没有工作的代码

<style>
@media print {
tr.vendorListHeading {
background-color: #1a4567 !important;
-webkit-print-color-adjust: exact;
   }
}  

@media print {
.vendorListHeading th {
color: white !important;
    }
}

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>

【问题讨论】：

你确定是 html，而不仅仅是你的打印机因为它超出了可打印区域而被切断了？
@MarcB 我认为这是确切的问题，所以我想将向下推一点，这样它就不会卡在可打印区域之外

标签： html css printing

【解决方案1】：

您可以使用页面的边距或填充 CSS 向页面添加填充。

【讨论】：

【解决方案2】：

老实说，我建议只截取屏幕截图并在文档编辑器等中调整图像大小，然后将其打印出来。

当问题似乎是您的打印机没有打印到页面边缘时，开始填充东西等似乎是不必要的努力。

【讨论】：

我想让我的观众可以轻松地打印页面并获得实时表格的纸质副本。
啊，我明白了！您能否将页面导出为图像并使用 blob 提示用户下载并打印？
我的意思是我可以，但我试图让它变得简单和容易，而无需下载和处理所有这些文件。