CODEWITHSUNDEEP
htmlcss
Jerko W. Tisler
Jerko W. Tisler

Reputation: 989

CSS print multiple page table with memo

I have to print large HTML table that goes through several pages. Every page should have memo on it (header and footer with company names and stuff). I'm using jQuery-datatables with TableTools. Here is my css

@media print
{
    @page{
        margin: 150px 0px 150px 0px !important;
        padding: 0px !important;
        size: A4 portrait;
    }

    table { page-break-after:auto;}
    tr    { page-break-inside:avoid; page-break-after:auto }
    td    { page-break-inside:avoid; page-break-after:auto }
    thead {
        display:table-row-group;
    }
    html{
        background-image: url(memo.png) !important;
        background-size: 200mm 287mm !important;
    }
}

However when setting top margin to @page it "moves" everything (including) background down. I wonder if there is a way to apply margin from @page to table but to avoid it when setting background, or to add background image to @page

I've also tried to set @page margin to 0 and table margin to 150px. It's fine on first page but since table is split to several pages it ignores margins on other pages.

UPDATE

enter image description here

I've added some sketch of wrong and wanted results. Red is header, blue is footer and green is table

Upvotes: 5

Views: 1289

Answers (1)

woestijnrog
woestijnrog

Reputation: 1579

Can you add an empty (first row to your) <thead>? Hide it when viewing the table on a screen and give it a height of 150px when printed.

The thead is repeated on every page the table spans. This means every page starts with an empty row, making space for the company logo and pushing the data down.

Similarly, add an empty last row to your <tfoot> to make room on the bottom of every page the table spans.

Upvotes: 1

Related Questions