Decrease tables to fit on a page

Question

Decrease tables to fit on a page

Navigation

#1 by (2 votes)

2

I have a page that has four tables and a button for the user to print.

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

I would like to be able to downsize the tables so they fit on the print page. Does anyone know how to do this?

HereyoucanseethatthetableisnotbeingdisplayedonthepagesincethelastcolumnshownisOUT_PREVandthelastcolumnisDEZ_REAL

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

html css table

asked by anonymous 09.07.2018 / 14:44

1 answer

Header files in C ++ using more than once Show hide content when clicked on a specific id

score 2 · Accepted Answer

I am warning you that it is not the most elegant solution, but in the last case you can break your branch.

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

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>

How it gets printed:

Tip:

YoucanalsoenableChrome's"print preview" in Dev Tools as this image. It's easier for you to adjust your CSS only in the format Print