打印大型HTML表格时如何处理分页符
我有一个项目，需要打印多行的HTML表格。
我的问题是表格打印在多个页面上的方式。 它有时会把一行切成两半，使得它不可读，因为一半在页面的最前端，而其余的则打印在下一页的顶部。
我能想到的唯一合理的解决scheme是使用堆叠的DIV而不是表格，如果需要，可以强制页面中断。但是在我想到之前我可以问的整个变化之前。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test</title> <style type="text/css"> table { page-break-inside:auto } tr { page-break-inside:avoid; page-break-after:auto } thead { display:table-header-group } tfoot { display:table-footer-group } </style> </head> <body> <table> <thead> <tr><th>heading</th></tr> </thead> <tfoot> <tr><td>notes</td></tr> </tfoot> <tbody> <tr> <td>x</td> </tr> <tr> <td>x</td> </tr> <!-- 500 more rows --> <tr> <td>x</td> </tr> </tbody> </table> </body> </html>
注意：当使用分页符后：总是为标签，它将在表的最后一位之后创build一个分页符，每次在末尾创build一个完全空白的页面！ 要解决这个问题，只需将其更改为page-break-after：auto。 它会正确地打破，而不是创build一个额外的空白页面。
<html> <head> <style> @media print { table { page-break-after:auto } tr { page-break-inside:avoid; page-break-after:auto } td { page-break-inside:avoid; page-break-after:auto } thead { display:table-header-group } tfoot { display:table-footer-group } } </style> </head> <body> .... </body> </html>
从思南Ünür解决scheme扩展：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test</title> <style type="text/css"> table { page-break-inside:auto } div { page-break-inside:avoid; } /* This is the key */ thead { display:table-header-group } tfoot { display:table-footer-group } </style> </head> <body> <table> <thead> <tr><th>heading</th></tr> </thead> <tfoot> <tr><td>notes</td></tr> </tfoot> <tr> <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td> </tr> <tr> <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td> </tr> <!-- 500 more rows --> <tr> <td>x</td> </tr> </tbody> </table> </body> </html>
看起来，page-break-inside：在某些浏览器中避免只考虑块元素，而不是cell，table，row和inline-block。
如果你试图显示：阻止TR标签，并在那里使用page-break-inside：避免，它可以工作，但是会随着你的表格布局而混乱。
在这里没有任何答案在Chrome中为我工作。 AAverin在GitHub上为这个目的创build了一些有用的Javascript，这对我有用 ：
只需将js添加到您的代码中，并将类“splitForPrint”添加到您的表中，它将整齐地将表分割成多个页面，并将表头添加到每个页面。
使用这些CSS属性：
page-break-after page-break-before
例如：
<html> <head> <style> @media print { table {page-break-after:always} } </style> </head> <body> .... </body> </html>
通过
我最近用一个很好的解决scheme解决了这个问题。
CSS：
.avoidBreak { border: 2px solid; page-break-inside:avoid; }
JS：
function Print(){ $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") }); $(".tableToPrint tr").wrap("<div class='avoidBreak'></div>"); window.print(); }
奇迹般有效！
我结束了@ vicenteherrera的方法，一些调整（可能是引导3具体）。
基本上; 我们不能破坏tr s或td s，因为它们不是块级元素。 所以我们将div分别embedded到div ，并对div应用我们的page-break-*规则。 其次; 我们在这些div的每一个的顶部添加一些填充，以补偿任何样式文物。
<style> @media print { /* avoid cutting tr's in half */ th div, td div { margin-top:-8px; padding-top:8px; page-break-inside:avoid; } } </style> <script> $(document).ready(function(){ // Wrap each tr and td's content within a div // (todo: add logic so we only do this when printing) $("table tbody th, table tbody td").wrapInner("<div></div>"); }) </script>
边缘和填充的调整是必要的，以抵消某种引入的抖动（我的猜测 – 从bootstrap）。 我不知道我是从这个问题的其他答案提出任何新的解决scheme，但我想这可能会帮助某人。
我查了很多解决scheme，任何人都不是很好。
所以我试了一个小窍门，它的作品：
tfoot with style： position: fixed; bottom: 0px; position: fixed; bottom: 0px; 被放置在最后一页的底部，但是如果页脚太高，则被表的内容重叠。
只用tfoot： display: table-footer-group; 不重叠，但不是最后一页的底部…
让我们把两个tfoot：
TFOOT.placer { display: table-footer-group; height: 130px; } TFOOT.contenter { display: table-footer-group; position: fixed; bottom: 0px; height: 130px; }
<TFOOT class='placer'> <TR> <TD> <!-- empty here --> </TD> </TR> </TFOOT> <TFOOT class='contenter'> <TR> <TD> your long text or high image here </TD> </TR> </TFOOT>
那么好吧……这里的大部分解决scheme都没有效果。 所以这是我的工作方式..
HTML
<table> <thead> <tr> <th style="border:none;height:26px;"></th> <th style="border:none;height:26px;"></th> . . </tr> <tr> <th style="border:1px solid black">ABC</th> <th style="border:1px solid black">ABC</th> . . <tr> </thead> <tbody> //YOUR CODE </tbody> </table>
第一组头被用作虚拟头，以便在分页时在第二头（即，原始头）中不会有缺失的顶部边界。
我已经尝试了上面给出的所有build议，并find简单和工作的跨浏览器解决scheme，这个问题 此解决scheme不需要任何样式或分页符。 对于解决scheme，表格的格式应该是这样的：
<table> <thead> <!-- there should be <thead> tag--> <td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>--> </thead> <tbody><!---<tbody>also must--> <tr> <td>data</td> </tr> <!--100 more rows--> </tbody> </table>
以上格式经过testing并在跨浏览器中运行
我接受的答案在所有的浏览器中都不起作用，但是下面的CSS对我来说还是有用的：
tr { display: table-row-group; page-break-inside:avoid; page-break-after:auto; }
html结构是：
<table> <thead> <tr></tr> </thead> <tbody> <tr></tr> <tr></tr> ... </tbody> </table>
在我的情况下，还有一些额外的问题，但这解决了保持表行不会中断的原始问题。
由于标题的问题，我最终结束了：
#theTable td * { page-break-inside:avoid; }
这并没有阻止行被打破。 只是每个单元格的内容。
