I have a report that my site generates that need to be printed consistently across browsers.

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Phone</th>
            <th>otherfield</th>
            <th>otherfield</th>
        </tr>
    </thead>
    <tbody>
        <tr class='vcard'>
            <td class='fn n'>Name</td>
            <td class='tel'>Phone</td>
            <td>otherfield</td>
            <td>otherfield</td>
        </tr>
    </tbody>
</table>

With the following CSS:

table{
    width: 100%;
}
thead {
    display: table-header-group;
    text-align: center;
}
tbody {
    display: table-row-group;
}
tr.vcard{
    page-break-inside: avoid;
    margin-top: 10px;
}

On Firefox and IE it prints fine, with the header row repeating at the top of each page. But on Chrome the header row does not repeat at the top of each page, which is okay. Also starting at the 3rd page Chrome starts losing lines.

Is there anyway I can stop Chrome losing lines, and possibly get it to repeat the header lines?

1 answer

danwellman 5600
0
points

Chrome seems to have issues with printing so there may not be much you can do...

Have you tried using the page-break-before and page-break-after CSS rules..?

Answered almost 8 years ago by danwellman
  • If I try page-break-after the only option I have is "always" which makes each table row print on their own page. so the print goes from 4 pages to 200+ pages Tyson of the Northwest almost 8 years ago
  • Can't you use page-break-after:always on every 20th row or however many rows safely fit on one page? danwellman almost 8 years ago