I have a basic table with a button underneath. This code snippet is located in the body section of my JSP file:
<div id="myDivForPrint">
<table class="t1">
<tbody>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
<button onclick="printDiv()">Print</button>
Here is the CSS code with @media rule designed to style the table. The CSS can be found in the head section of my JSP file:
@media print,screen{
table.t1 {
margin: 1em auto;
border-collapse: collapse;
font-family: Arial, Helvetica, sans-serif;
}
.t1 th, .t1 td {
padding: 4px 8px;
}
.t1 thead th {
background: #4f81bd;
text-transform: lowercase;
text-align: left;
font-size: 15px;
color: #fff;
}
.t1 tr {
border-right: 1px solid #95b3d7;
}
.t1 tbody tr {
border-bottom: 1px solid #95b3d7;
}
.t1 tbody tr:nth-child(odd) {
background: #dbe5f0;
}
.t1 tbody th, .t1 tbody tr:nth-child(even) td {
border-right: 1px solid #95b3d7;
}
.t1 tfoot th {
background: #4f81bd;
text-align: left;
font-weight: normal;
font-size: 10px;
color: #fff;
}
.t1 tr *:nth-child(3), .t1 tr *:nth-child(4) {
text-align: right;
}
}
</style>
Below is the JavaScript function used to print the div containing the table. It is placed in the body section of my JSP file:
<script type="text/javascript">
function printDiv()
{
var divToPrint=document.getElementById("myDivForPrint");
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.document.close();
newWin.document.focus();
newWin.print();
newWin.close();
}
</script>
The webpage appears well-formatted on screen. However, when I attempt to print the page as an XPS document by clicking the print button, all the CSS styling is not retained, resulting in a poorly formatted output with only the table content printed.
What could be causing this issue? I am using IE8 and cannot switch to a different browser or newer version of IE.