打印时表格样式混乱答案

【问题标题】：Table style messed up when printing打印时表格样式混乱
【发布时间】：2016-09-27 06:31:56
【问题描述】：

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

要打印的表格

打印预览

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

【问题讨论】：

您是否使用了任何可能会修改您的@media print 样式的第三方样式表？
我根本没有使用任何样式表。我将所有需要的样式都放在了 html 中

标签： javascript html printing html-table

【解决方案1】：

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

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

【讨论】：

当我不使用表格时它可以完美运行，那么我为什么要为表格创建样式表呢？它们有何不同？

【解决方案2】：

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

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

【讨论】：