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

Question

我创建了一个包含 Datalist 控件的页面，它生成 "ID cards".
你可以看到工作示例 here.

问题是我想在 Datalist 的每 4th 行之后分页。

所以要执行这个，我正在使用这个 jQuery 代码：

<script type="text/javascript">
        $(document).ready(function () {
            $("#GridView1 tr:nth-child(4n+0)").addClass("breakpage");

        })
    </script>

还有 CSS class:

<style type="text/css">
                .breakpage {
                page-break-after: always;
        }
    </style>

因此，如果您打开页面并检查检查元素，您可以看到 jQuery 正在运行，并且它确实添加了 class 每 第 4 行。
但是，当我尝试打印时，分页符在 Google Chrome 中不起作用（在 firefox 中工作正常）.

Could someone please explain what is wrong with the code?

谢谢。

Answer 1

在 CSS 中试试这个：

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

Answer 2

How to achieve page break in HTML table for Google Chrome? 你能看看这个页面是否有帮助吗？这可能与 tr 是 display: table-row 而不是 display: block 有关显然 Chrome 仅将分页符应用于块级元素。

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

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

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

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

Page break in DataList (asp.net) in Google Chrome

html

css

asp.net

google-chrome

page-break