打印 HTML 表格而不将一行拆分成两页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6586250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Printing HTML tables without splitting a row across two pages
提问by Wodin
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.
我需要从 Internet Explorer（各种版本）和 OS X 上的 Safari 打印 HTML 表中的一些数据。暂时忽略 Safari。
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?
我一直在四处寻找，到目前为止我已经找到了page-break-before: always，但我不确定这是否是我要找的，因为我不知道页面上可以容纳多少行。例如，根据内容，行可能更高或更短，并且用户可能以纵向或横向模式打印。我至少假设 A4，但如果用户使用美国信函或其他一些纸张尺寸，它会引入更多的不确定性。另外，打印机边距呢？
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?
那么有没有办法解决这个问题？或者我只需要猜测将适合多少行并在此之后强制分页？这甚至会起作用吗？
采纳答案by Mrchief
You probably want to play around with page-break-before/after: auto. page-break-insidewould be ideal but its not supportedby most browsers.
你可能想玩玩page-break-before/after: auto. page-break-inside将是理想的，但它不受大多数浏览器的支持。
Take a look here http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.htmlfor some good info.
看看这里http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.html一些好的信息。
回答by Brad Christie
How about page-break-inside:avoid?
There seem to be a lotof talk about this, however I did also find another SO articlementioning page-break-before:autoand applying to each table cell.
似乎有很多关于这个的讨论，但是我也发现了另一篇 SO 文章提到page-break-before:auto并应用于每个表格单元格。
回答by Flavien Volken
To avoid printing split cells on Safari:
要避免在 Safari 上打印拆分单元格：
tr
{
display: block;
page-break-inside: avoid;
-webkit-region-break-inside: avoid;
}
回答by DoctorDestructo
A few simple solutionsdo 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.
确实存在一些简单的解决方案来防止行内的分页符，但它们有一些非常大的限制，往往使它们对除 Intranet 之外的任何内容都无用。
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:
我最喜欢的解决方案有点复杂，但它最终可能会引起最少的头痛。它使用 JavaScript 将每一行变成一个单独的、牢不可破的块（但不会影响表格的外观）。我已经发布了一些使用这种技术的答案：
