Question

I’ve got a huge table that spans on several pages (it’s a report) and a image as a header at the top with a few words if the user chooses to use a date range.

The problem is with mozilla. He prints the header image and skips a whole page and starts printing the table. I’ve tried several things in the CSS such as

.datatable {
    color: #000000;
    border: 2px solid #002255;
    page-break-inside:auto;
}
.datatable tr {
    page-break-inside:avoid;
    page-break-after:auto;
}

But it is still not allowing the first page to print correctly. I’m not gonna paste the table as it is super simple layout like this:

<table>
    <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
            <th>header3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
        </tr>
    </tbody>
</table>

Can you please instruct me how i can change this to make it compatible with mozilla’s weird printing technique.

It works fine in safari, ie8, ie9, safari, just mozilla that fails.

Answer 1

Never mind all that, after tweaking the table somemore, i realized there was some invalid html code printing BEFORE the tabel and that’s what intefered with with the table printing. Nothing to do with CSS or the printing styles after all.