Print html table in landscape

Question

I have a report dynamically generated from the database, a certain part of this report should be printed inside a table. I would like to print this table in landscape outline put the rest of the report should be printed normally "portrait".

So, any ideas how to accomplish that?

Answer 1

You can set in CSS the @page property, see code bellow:

@media print{@page {size: landscape}}

Answer 2

If you create a table and treat it as 100% width relative to the page, then the printer should automatically print to the full page width. Whether you get landscape or portrait depends on which one you choose in the print settings when you actually print it. The only way you'll be able to accomplish this cleanly is to make two seperate html documents -- one that contains the portrait portions and the other that contains the landscape portions. Then print each document separately.

There are only two other theoretical ways of accomplishing the task: 1) Some kind of browser plugin that would send separate print jobs for you, figuring out which portions of the document should be printed in which fashion.

2) Using CSS3 Transforms. Generate a static image of the table to print and then transform (rotate) it 90 degrees on the page so it looks sideways on the screen. If you rotated some parts of the document, then theoretically you could accomplish the whole thing in one job. But don't even waste your time. This would be an utter nightmare. Especially if you had to ask how to do it.

Answer 3

You could turn the table 90 degrees this way:

   <div style="display: block; margin: 0; break-before: page; width: 297mm; height: 210mm; transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;" >

 <table style="word-wrap: break-word; table-layout: fixed; width: 100%;">
   <tr><td>A row</td></tr>
 </table>
</div>

The word-wrap and table-layout styles was necessary to keep the table inside the page and not overwrite itself. You probably need to fiddle with the width, height and translation values in the div but those worked for me for an A4 page. It worked for me in Chrome have not checked others.