打印html表，防止行跨越多个页面 [英] Printing html tables, preventing rows from spanning multiple pages
问题描述
我以编程方式生成html，以便将其很好地呈现以便打印.
I generate html programmatically in order to have it rendered nicely for printing.
我必须打印可能跨越几页的表格.这带来了一些挑战，例如阻止单元格内容散布在两个页面上，如下所示:
I have to print tables that may span several pages. This poses some challenges such as preventing cell contents to spread over two pages like this:
我在此答案中找到了一种解决方案，该解决方案使用page-break-inside:avoid以及
I found a solution in this answer, which uses page-break-inside:avoid, along with this answer, which uses display: block for the <tr> elements in order to prevent them from getting split up vertically.
但是，这也会导致行不再彼此垂直对齐.我该如何解决?
However, this also causes the rows not to vertically align with each other any more. How do I fix that?
这是它的外观(以及浏览器在屏幕上的呈现方式):
Here's how it should look (and how the browser renders it on-screen):
这是打印时呈现的内容:
And here's what it renders for printing:
如何使打印输出与在屏幕上对齐的输出对齐，而又不必失去display: block在分页符处保持单元格垂直完整的能力?它必须能够在macOS上的Webkit(Safari)中工作.
How do I make the printout aligned, the samew as it's aligned on the screen, without having to lose the display: block ability to keep cells vertically intact at page breaks? It has to work in Webkit (Safari) on macOS.
这是完整的html代码.它跨越两页，因此您可以检查单个单元格是出现在一页上的一半还是下一页的一半(这是不希望的):
Here's the complete html code. It spans two pages so that one can check whether individual cells appear half on one and half on the next page (which is not desired):
<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">
th, td { border: 1px solid #aaa; }
@media print {
table, tr, td, th {
page-break-inside: avoid;
}
tr {
display: block;
page-break-before: auto;
}
}
</style></head>
<body>
<table style="width:40%">
<tr><th>A</th><th>B</th><th>C</th></tr>
<tr><td>more text<br>1<br>2<br>3<br>4<br>5<br></td><td>more text</td><td>more text</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
</table>
</body></html>
更新:
我还尝试了此解决方案，该解决方案使用div而不是table.这在打印时给出的结果略有不同，但是仍然很差(现在单元格的高度也是错误的):
I also tried this solution which uses div instead of table. This gives slightly different results when printing, but still bad (now the cell heights are wrong, too):
推荐答案
添加
td, th {
width: 10000px;
}
内部@media print { }起到了使示例代码正常工作的作用.
inside @media print { } did the trick to make the example code work.
现在，已打印的列再次正确对齐，并且每一行都停留在一页上，不再跨越两页.
Now the printed columns are properly aligned again, and each row stays on a single page, never spanning two pages.
可在当前版本的Webkit(Safari)，FF和Chrome(仅在macOS上测试)中使用.
Works in current versions of Webkit (Safari), FF and Chrome (all tested on macOS only).
注意:
不幸的是，以上内容并非万无一失.仅在此示例中有效，因为每行中的单元格具有相同的宽度.
Unfortunately, the above is not fool proof. It only works in this example because the cells in each row have the same width.
一旦这些宽度是随机的，那么超过10000px的像素宽度将再次弄乱列.
Once those widths are random, an over-reaching pixel width like 10000px is messing up the columns again.
我发现的唯一解决方案是提供要使用的实际宽度.由于这是为了打印，并且因为我知道我想打印为特定的纸张格式(例如DIN A4或US Letter)，所以我可以确定地精确指定列宽.
The only solution I found around this is to provide actual widths that are to be used. Since this is for printing, and since I know that I want to print to a specific paper format (e.g. DIN A4 or US Letter), I can specify the column width precisely with certainty.
因此，尽管此解决方案对于总屏幕宽度可能会变化的屏幕浏览器中的网页视图来说不是一个很好的解决方案，但只要可以预测目标打印尺寸，它对于打印是一个很好的解决方案.
So, while this solution is not a good one for a web page view in a browser on-screen, where the total width can vary, it's a good solution for printing, as long as the target print size can be predicted.
这是完整的html代码，将列宽设置为4cm，2cm和3cm:
Here is the complete html code, setting the column widths to 4cm, 2cm and 3cm:
<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">
th, td { border: 1px solid #aaa; }
@media print {
table, tr, td, th {
page-break-inside: avoid;
}
tr {
display: block;
page-break-before: auto;
}
td:nth-child(1), th:nth-child(1) {
width: 4cm;
}
td:nth-child(2), th:nth-child(2) {
width: 2cm;
}
td:nth-child(3), th:nth-child(3) {
width: 3cm;
}
}
</style></head>
<body>
<table>
<tr><th>A</th><th>B</th><th>C</th></tr>
<tr><td>more text<br>1<br>2<br>3<br>4<br>5<br></td><td>more text</td><td>more text</td></tr>
<tr><td>1 adasd<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1asd<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>xsdsdfsf</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
<tr><td>1<br>2 asda asdas<br>3<br>4<br>5<br>6<br></td><td>xasdada</td><td>x</td></tr>
<tr><td>1<br>2<br>3<br>4 asdasd <br>5<br>6<br></td><td>x</td><td>x</td></tr>
</table>
</body></html>
这篇关于打印html表，防止行跨越多个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
