I have a table which is OK in web pages, but when printing my table (ctrl+p) it breaks not the way I want. The last row of the first page splits with the part of the row on the first page and the other part of the row on the second page. So, is there any way to overcome the problem, the rows can have different content and size. I also tried this properties
page-break-before/after: auto. page-break-inside:avoid;
但没有结果。有没有办法打破表格并将表格的一部分移动到下一页,而不将最后一行分成打印介质的两部分?任何帮助将不胜感激。
表,th,td
{
边框:1px纯黑;
边框折叠:折叠;
}
th,td
{
内边距:5px;
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<th><span>Firstname</span></th>
<th><span>Lastname</span></th>
<th><span>Points</span></th>
</tr>
<tr>
<td><span>Jill</span></td>
<td><span>Smith</span></td>
<td><span>50</span></td>
</tr>
<tr>
<td><span>Eve</span></td>
<td><span>Jackson</span></td>
<td><span>94</span></td>
</tr>
<tr>
<td><span>John</span></td>
<td><span>Doe</span></td>
<td><span>80</span></td>
</tr>
/*here I have many <tr> elements*/
</table>
</body>
</html>
如果我理解正确的话,您希望表格仅在行之间而不是在行内中断。您可以使用以下 css 规则在 Firefox 和 Internet Explorer 中完成此操作:
tr {page-break-inside: avoid;}
不幸的是,这在其他流行的浏览器(例如 Chrome)中不起作用。
正如所建议的,您可以通过将单个单元格的内容包装在具有“page-break-inside:avoid;”的 div 中来防止其内分页。设置它,但如果行内的内容高度不同,您仍然会在两个不同的页面上看到该行的部分内容。
If you really想要解决这个问题并且愿意投入一些javascript,我在这里发布了一个解决方案 https://stackoverflow.com/questions/7211229/having-google-chrome-repeat-table-headers-on-printed-pages/25737442#25737442这应该够了吧。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)