Javascript @媒体打印css打印时未格式化表格

我有一张简单的桌子，下面有一个按钮。这是我的jsp的主体部分，如下所示：

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

一
二
三
1.
2.
3.
4.
5.
6.
打印

下面是带有@media规则的CSS，它应该设置表的格式。CSS位于我的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>

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

@媒体打印，屏幕{
表1.t1{
保证金：1em自动；
边界塌陷：塌陷；
字体系列：Arial、Helvetica、无衬线字体；
} 
.t1 th、.t1 td{
填充：4px8px；
} 
.t1 thead th{
背景：#4f81bd；
文本转换：小写；
文本对齐：左对齐；
字体大小：15px；
颜色：#fff；
} 
.t1 tr{
右边框：1px实心#95b3d7；
} 
.t1 tbody tr{
边框底部：1px实心#95b3d7；
} 
.t1 tbody tr:n个孩子（奇数）{
背景#dbe5f0；
} 
.t1 tbody th、.t1 tbody tr:n子级（偶数）td{
右边框：1px实心#95b3d7；
} 
.t1 tfoot th{
背景：#4f81bd；
文本对齐：左对齐；
字体大小：正常；
字体大小：10px；
颜色：#fff；
} 
.t1 tr*：第n个孩子（3），.t1 tr*：第n个孩子（4）{
文本对齐：右对齐；
}
}

下面是用于打印包含我的表的div的javascript函数。它位于我的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>

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

函数printDiv（）
{
var divToPrint=document.getElementById（“myDivForPrint”）；
newWin=window.open（“”）；
newWin.document.write（divToPrint.outerHTML）；
newWin.document.close（）；
newWin.document.focus（）；
newWin.print（）；
newWin.close（）；
}

页面在屏幕上的格式很好。但是，当我单击“打印”按钮并将页面打印为xps文档时，所有CSS格式都会丢失，只打印表的内容，这看起来非常糟糕

---

我做错了什么？我使用的是IE8，无法移动到其他浏览器或更新版本的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
    }
}

打印表格时，仅应用打印介质中定义的样式