Decrease tables to fit on a page

Question

I have a page that features four tables and a button so the user can print them.

The problem is that these tables have a lot of columns and when I try to print, they are cut.

I wish I could decrease the size of the tables so that they fit on the print page. Does anyone know how to do this?

Here you can see that the table is not being shown whole on the page since the last column shown is OUT_PREV and the last column is Dez_real

And in the print page even in landscape mode the last column being shown is AGO_PREV and the last column that should be shown is DEZ_REAL.

Answer 1

I warn you that is not the most "elegant" solution, but ultimately can break your branch.

With this CSS you will decrease the scale of your table by 20% with scale(0.8), ie 80% of the original size. And changing the font size in case I put font-size:9px, only at the time of printing. OBS: The scale() affects this font-size, then it will be 9px - 20% of the size due to Scale 0.8, but you can do some tests until you fit the values ideas for your table gets a legal readability.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
@media print {
    table {
        transform: scale(0.8); /* diminui em 20% o tamanho total da tabela na impressão */
        font-size: 9px; /* diminua um pouco a fonte na hora da impressão */
    }
}
@page {
    size: landscape; /* muda a orientação da página para landscape na hora da impressão */
}

<table border="1px">
        <thead>
            <tr>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>item</th>
                <th>last</th>
            </tr>
        </thead>
        <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>
                <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>último ítem</td>
            </tr>
        </tbody>
    </table>

Like it looks in the print:

---

Tip:

You can also enable "print view" by Chrome in Dev Tools as per that image. Ai is easier for you to adjust your CSS only in format Print