Search code examples
htmlcssprintinghtml-tablelandscape

Print html table in ladscape mode

Given the following html code:

<html>
<style>
    div.container > table {
        border-collapse: collapse;
    }
    div.container > table > tbody > tr > td {
        border: 1pt solid;
    }
</style>

<body>
    <div class="container">
        <p>Hello</p>
        <table>
            <tbody>
                <tr>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                </tr>
            </tbody>
        </table>
        <p>Hi</p>
    </div>
</body>
</html>

I want to print to A4 portrait orientation in the following way:

  1. First page contains "Hi" in portrait orientation
  2. Second page contains the table, but rotated 90 degrees. Said otherwise, second page must be printed in landscape orientation
  3. Third page contains "Hello" in portrait orientation

I tried adding the following style:

@media print {
    @page {
        size: a4 portrait;
    }
    div.container > table {
        break-before: page;
        break-after: page;
        transform: rotate(-90deg);
    }
}

The problem are that:

  1. The table is not aligned to the upper left corner of the page
  2. The table is sized in portrait mode before being rotated. This means the width of the table is still the one in the portrait mode

How can I achieve my objective?

Requirements:

  1. The HTML code must stay exactly as it is. You cannot put the table in another div or modify it in any way
  2. Only CSS, and, if that is not possible pure Javascript

Related question is no good because (1) the first solution prints everything in landscape mode, not just the table (2) the second solution has the same problems of the solution I propose.

EDIT:

Tried this but didn't work:

@media print {
    @page general{
        size: a4 portrait;
    }

    @page rotated {
        size: a4 landscape;
    }

    div.container {
        page: general;
    }

    div.container > table {
        break-before: page;
        break-after: page;
        page: rotated;
    }
}
Solution

  • Try this. Click on the page (on the text "hello" for example) to open the print preview.

    document.body.addEventListener("click", ()=>{
window.print()
});
    table
{
transform: rotate(90deg) translate(0%, -100vw);
transform-origin: left top;
display: block;
position: relative;
break-before: page;
break-after: page;
margin: 0px -20px;
}
    <html>
<style>
    div.container > table {
        border-collapse: collapse;
    }
    div.container > table > tbody > tr > td {
        border: 1pt solid;
    }
</style>

<body>
    <div class="container">
        <p>Hello</p>
        <table>
            <tbody>
                <tr>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                </tr>
            </tbody>
        </table>
        <p>Hi</p>
    </div>
</body>
</html>

    Edit: here my print preview:
    enter image description here