表格行分成两页（打印介质） [英] Table row splits across two pages (print media)
问题描述
我在网页中有一张表格，但是当打印我的表格时（ ctrl + p ），它不符合我的要求。第一页的最后一行与第一页的行的一部分和第二页的行的另一部分分开。那么，有什么办法可以解决这个问题，这些行可以有不同的内容和大小。我也试过这个属性
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;
但没有结果。有没有办法打破这个表格，并将表格的一部分移动到下一页，而不会将打印介质的最后一行分成两部分？任何帮助将不胜感激。
but with no result. Is there any way to break the table and move the part of the table to the next page without splitting the last row into two parts for print media? Any help will be appreciated.
表格，th，td
{
border：1px纯黑色;
border-collapse：collapse;
}
th，td
{
padding：5px;
}
table,th,td { border:1px solid black; border-collapse:collapse; } th,td { padding: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中完成此操作：
If I understand correctly, you want your table to break only between rows and not within them. You can accomplish this in Firefox and Internet Explorer with the following css rule:
tr {page-break-inside: avoid;}
不幸的是，这在其他流行浏览器（例如Chrome）中无法使用。
Unfortunately, that doesn't work in other popular browsers, such as Chrome.
如前所述，您可以通过将其包含在具有page-break-inside：avoid;的div中来防止单个单元格内容的分页符。设置它，但如果内容高度在行内发生变化，您仍然会在两个不同的页面上看到行的部分内容。
As has been suggested, you can prevent page breaks within the content of an individual cell by wrapping it in a div that has "page-break-inside: avoid;" set on it, but if the content height varies within the row, you'll still end up with parts of the row on two different pages.
如果您真的想要解决这个问题，并愿意抛出一些JavaScript的，，应该这样做。
If you really want to solve this problem and are willing to throw some javascript at it, I have posted a solution here that should do the trick.
这篇关于表格行分成两页（打印介质）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
