I'm having trouble printing a basic certificate that is formatted as an HTML table. There are a couple of frustrating issues I'm facing. 1) When I try to print the table using Chrome, my CSS changes are not being applied. 2) I can't seem to consistently center the text in the correct places. 3) I'm struggling to rotate the entire table for printing in portrait orientation.
Here is a snippet of my CSS:
@media print {
/* show cover in print */
.cover {
display: block;
}
.dvCertWrapper {
}
.cert {
width: 1080px!important;
content: url('../Content/images/certificate.jpg');
margin-left: -210px;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
.certContent {
display: block;
margin-top: -680px;
width: 100%;
text-align: center;
}
.startDate {
display: block;
font-family: "Century Schoolbook" !important;
font-size: 20px;
font-style: normal;
margin-top: -170px;
margin-left: -102px;
position: absolute;
}
.endDate {
display: block;
font-family: "Century Schoolbook" !important;
font-size: 20px;
font-style: normal;
margin-top: -10px;
margin-right: -60px;
position: absolute;
}
/* hide other elements in print */
button {
display: none;
}
.smallText {
font-size: .8em;
width: 800px;
}
table {
border-collapse: collapse;
width: 1800px;
}
}
And here is a snippet of my table definition:
<table class="certContent" style="display: block">
<tbody >
<tr style="width: 800px !important">
<td class="smallText"> Valid From: {{vendor.dStartDate}}</td>
<td> </td>
<td> </td>
<td class="smallText">Valid Till: {{vendor.dEndDate}} </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<th colspan="4"> {{vendor.sBusinessnameLegal}}</th>
</tr>
<tr>
<th colspan="2">{{vendor.iSic1}}</th>
<th colspan="2">{{vendor.iSic2}}</th>
</tr>
<tr>
<td colspan="2">{{vendor.iSic3}}</td>
<td colspan="2">{{vendor.iSic4}}</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
</tbody>
</table>
I've tried different approaches with no success so far. Any tips or advice would be greatly appreciated. Thank you.