gpt4 book ai didi

html - 表格行分成两页(打印媒体)

转载 作者:可可西里 更新时间:2023-11-01 13:33:15 25 4
gpt4 key购买 nike

我有一个在网页中可以正常使用的表格,但是当打印我的表格时 (ctrl+p) 它没有按我想要的方式中断。第一页的最后一行与第一页上的行的一部分和第二页上的行的另一部分分开。那么,有什么办法可以克服这个问题,行可以有不同的内容和大小。我也试过这个属性

 page-break-before/after: auto. page-break-inside:avoid;

但没有结果。有没有办法打破表格并将表格的一部分移动到下一页而不将最后一行分成两部分用于打印媒体?任何帮助将不胜感激。

enter image description here

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 中完成此操作:

tr {page-break-inside: avoid;}

遗憾的是,这不适用于其他流行的浏览器,例如 Chrome。

正如所建议的那样,您可以通过将其包装在具有“page-break-inside: avoid;”的 div 中来防止单个单元格内容中出现分页符。对其进行设置,但如果行内的内容高度不同,您仍然会在两个不同的页面上看到该行的部分内容。

如果您真的想解决这个问题并且愿意使用一些 javascript,I have posted a solution here这应该可以解决问题。

关于html - 表格行分成两页(打印媒体),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24350634/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com