我以编程方式生成 html，以便将其渲染得很好以供打印。
我必须打印可能跨越数页的表格。这带来了一些挑战，例如防止单元格内容像这样分布在两个页面上:
我在 this answer 中找到了解决方案，它使用 page-break-inside:avoid , 以及 this answer ，它使用 display: block对于 <tr>元素，以防止它们垂直 split 。
但是，这也会导致行不再垂直对齐。我该如何解决？
这是它的外观(以及浏览器如何在屏幕上呈现它):
这是它为打印而呈现的内容:
如何使打印输出对齐，就像它在屏幕上对齐一样，而不必丢失 display: block能够在分页符处保持单元格垂直完整？它必须在 macOS 上的 Webkit (Safari) 中工作。
这是完整的 html 代码。它跨越两页，因此可以检查单个单元格是否在一页上显示一半，在下一页显示一半(这是不需要的):
<!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>
更新:
我也试过this solution使用div而不是 table .这在打印时会产生略有不同的结果，但仍然很糟糕(现在单元格高度也不对):
最佳答案
添加
td, th {
width: 10000px;
}
在 @media print { } 中做了使示例代码工作的技巧。
现在打印的列再次正确对齐，每行都在一页上，不会跨越两页。
适用于当前版本的 Webkit (Safari)、FF 和 Chrome(均仅在 macOS 上测试过)。
警告:
不幸的是，以上内容并非万无一失。它仅适用于此示例，因为每行中的单元格具有相同的宽度。
一旦这些宽度是随机的，像 10000px 这样超出范围的像素宽度会再次弄乱列。
我找到的唯一解决方案是提供要使用的实际宽度。由于这是用于打印，并且因为我知道我想打印到特定的纸张格式(例如 DIN A4 或 US Letter)，所以我可以确定地精确指定列宽。
因此，虽然此解决方案对于屏幕上浏览器中的网页 View 来说不是一个好的解决方案，总宽度可能会有所不同，但它是一个很好的打印解决方案，只要可以预测目标打印尺寸即可。
这是完整的 html 代码，将列宽设置为 4cm、2cm 和 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>
关于css - 打印html表格，防止行跨越多个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47478539/