Question

我正在使用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>

Answer 1

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

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

Answer 2

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

打印时，Html表格会被切断

2 个答案: