Table style messed up when printing

Question

I'm trying to print a simple table, yet the layout seems to mess up. Does anybody know why?

Table to print

Print Preview

Here is the HTML and JS I have used to create the Table.

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>

Are you using any 3rd party stylesheets that may be modifying your `@media print` style? — zero298, Aug 02 '16 at 13:52
I'm not using any stylesheets at all. I put all my needed style inside the html — Peter Raeves, Aug 02 '16 at 14:21

score 0 · Answer 1 · answered Aug 02 '16 at 13:52

0

You need to specify style related to print .

You can use @media print to specify styles for print

answered Aug 02 '16 at 13:52

brk

48,835
10
56
78

It works perfect when I don't use tables, so why should I create a stylesheet for tables? How are they different? – Peter Raeves Aug 02 '16 at 14:22

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

In the end, I used the solution proposed here is such alignment achievable without <table>?

By aligning my text without using the table tag, the text prints just fine.

edited May 23 '17 at 12:06

Community

1
1

answered Aug 02 '16 at 14:36

Peter Raeves

516
1
4
17

Table style messed up when printing

2 Answers2