打印时表格样式变化

我试图打印一张简单的表格，但布局看起来很糟糕。有人知道为什么吗？打印时表格样式变化

表打印

打印预览

下面是HTML和JS我已经用于创建表。

function printData() { 
 
    var divToPrint = document.getElementById("printtable"); 
 
    newWin = window.open(""); 
 
    newWin.document.write(divToPrint.outerHTML); 
 
    newWin.print(); 
 
    newWin.close(); 
 
} 
 

 
$('button').on('click', function() { 
 
    printData(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="printtable" style="border: 1px solid black; width: 90mm; height: 29mm;"> 
 
    <div style="float: left; font-size: 10px; position: relative; top: 50%; transform: translateY(-50%); margin-left: 2mm;"> 
 
    <p> 
 
     <img src="/" alt="" height="30"> 
 
    </p> 
 
    <table> 
 
     <tbody> 
 
     <tr> 
 
      <td><u>Row 1</u>&nbsp;:</td> 
 
      <td>&nbsp; Row 1</td> 
 
     </tr> 
 
     <tr> 
 
      <td><u>Longer Row 2</u>&nbsp;:</td> 
 
      <td>&nbsp; Row 2</td> 
 
     </tr> 
 
     <tr> 
 
      <td><u>R3</u> :</td> 
 
      <td>&nbsp; Row 3</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div> 
 
<br /> 
 
<br /> 
 

 
<button>Print me</button>

来源

2016-08-02 Peter Raeves

您是否在使用任何可能正在修改'@media print'风格的第三方样式表？ – zero298

我没有使用任何样式表。我将所有我需要的样式放在html –