@media print css not formatting table on printing

Question

I have a simple table with a button below it. This is in the body section of my jsp as below:

<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> 

Below is the CSS with @media rule which is supposed to format the table. The CSS is in head section of my jsp:

    @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 to print the div containing my table. It is in the body section of my jsp:

<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 page comes nicely formatted on screen. However, when I click on the print button and print the page as an xps document, all the CSS formatting is lost and just the content of the table gets printed which looks really bad.

What am I doing wrong ? I am using IE8 and that I can not move to other browser or newer version of IE.

Answer 1

You can use different styles for screen and print media in your style sheet, ie

@media screen
{
    table.test {
        font-family:"Times New Roman",Georgia;
        font-size:10px;
        // more
    }
}

@media print
{
    table.test {
        font-family:Verdana, Arial;
        font-size:10px;
        // more
    }
}

When you'll print the table only styles defined in print media will be applied.

Click This for more