打印时表格样式搞砸了

Question

我正在尝试打印一张简单的表格，但布局似乎搞得一团糟。有人知道为什么吗？

要打印的表格

打印预览

这是我用来创建表格的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>

Answer 1

您需要指定与打印相关的样式。

您可以使用@media print指定打印样式

Answer 2

最后，我使用了此处提出的解决方案is such alignment achievable without <table>?

通过在不使用表格标签的情况下对齐文本，文本打印得很好。