Printing HTML tables without splitting a row across two pages

问题

I need to print some data in an HTML table from Internet Explorer (various versions) and Safari on OS X. Ignoring Safari for the moment.

When printing a table that has more rows than can fit on a page, the last row on the page is often split with part of the row on the first page and the rest of the row on the next page.

This looks ugly. Is there a way to avoid it?

I've been searching around and so far I've found page-break-before: always, but I'm not sure if that's what I'm looking for, since I won't know up front how many rows will fit on the page. e.g. the rows might be taller or shorter depending on the content and the user might be printing in portrait or landscape mode. I'm assuming A4 at least, but if the user was using US letter or some other paper size it would introduce even more uncertainty. Also, what about printer margins?

So is there a way around this? Or do I just have to guess how many rows will fit and force a page break after that? Will that even work?

回答1:

You probably want to play around with page-break-before/after: auto. page-break-inside would be ideal but its not supported by most browsers.

Take a look here http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.html for some good info.

回答2:

How about page-break-inside:avoid?

There seem to be a lot of talk about this, however I did also find another SO article mentioning page-break-before:auto and applying to each table cell.

回答3:

To avoid printing split cells on Safari:

tr
{
    display: block;
    page-break-inside: avoid;
    -webkit-region-break-inside: avoid; 
}

回答4:

A few simple solutions do exist for preventing page breaks within rows, but they have some pretty big limitations that tend to make them useless for anything but intranet stuff.

A more versatile solution that's only slightly more complicated can be found here. Its main drawback is that it requires fixed column widths.

My favorite solution is quite a bit more complicated, but it will probably cause the fewest headaches in the end. It uses JavaScript to turn every row into a separate, unbreakable block (but not in a way that affects the table's appearance). I've posted a few answers that use this technique:

• Answer 1 (best)
• Answer 2

来源：https://stackoverflow.com/questions/6586250/printing-html-tables-without-splitting-a-row-across-two-pages