Tabellenformat beim Drucken fehlerhaft

Question

Ich versuche, eine einfache Tabelle zu drucken, aber das Layout scheint zu versauen. Weiß jemand warum?

Tabelle

Druckvorschau

Hier ist der HTML und JS ich verwendet habe, zu drucken, um die Tabelle zu erstellen.

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>

Answer 1

Sie benötigen Stil festlegen zu drucktechnisch bedingt.

Sie @media print Stile für den Druck angeben können

Answer 2

Am Ende habe ich die Lösung hier is such alignment achievable without <table>? vorgeschlagen

Durch meinen Text ausrichten, ohne die Tabelle Tag zu verwenden, den Text druckt gut.