My html table looks fine in the print preview in Chrome but the table header seems to appear twice in the Firefox print preview. Also, in the Safari print preview, the entire table doesn't appear at all, which is worse. Is there a way to solve these issues? Thanks!
#testTable tr, #testTable th, #testTable td
{
border:solid 1px;
font-size:9px;
padding:2px;
text-align:center;
}
#testTable th
{
background-color:#ebebeb !important;
}
@media print
{
#testTable
{
position: fixed;
left: 0;
margin-top: 100px !important;
width:99% !important;
margin-left:0px;
}
}
@supports (-moz-appearance:meterbar)
{
#testTable th
{
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
this is the html table
<table id="testTable">
<tr>
<th>Reference</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>