Google Chrome 中 DataList (asp.net) 中的分页符

Question

我创建了一个带有Datalist控件的页面，它生成“ID 卡”。您可以在此处查看工作示例。问题是我想在Datalist的每4行之后中断页面。因此，为了执行此操作，我使用以下jQuery代码：<script type="text/javascript">        $(document).ready(function () {            $("#GridView1 tr:nth-child(4n+0)").addClass("breakpage");        })    </script> 还有CSS类：<style type="text/css">                .breakpage {                page-break-after: always;        }    </style>因此，如果您打开页面并检查检查元素，您可以看到 jQuery正在工作，并且它确实在每4行添加该类。但是，当我尝试打印时，分页符在 Google Chrome 中不起作用（在 Firefox 中工作正常）。有人可以解释一下代码有什么问题吗？谢谢。

Answer 1

tr它可能与存在有关，display: table-row而不是display: block 显然 Chrome 只将分页符应用于块级元素。

编辑：我刚刚测试了以下设置可以修复它：

#GridView1 > tbody > tr {
    display: block;
}

如果我缩小页面的边距，则分页符不会落在下一页上，但是调整卡片的大小也可以解决此问题，这样您就不会拥有完全空白的页面

Answer 2

在 CSS 中尝试一下：

#GridView1 tr:nth-of-type(4n) {
  page-break-after:always;
}