Html Google Chrome中数据列表（asp.net）的分页符

我创建了一个页面，其中包含数据列表控件，该控件生成“ID卡”。
您可以看到工作示例

问题是，我想在每第四行数据列表之后中断页面

因此，为了执行此操作，我使用以下jQuery代码：

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

        })
    </script> 

$（文档）.ready（函数（）{
$（“#GridView1 tr:nth child（4n+0）”）.addClass（“breakpage”）；
})

以及CSS类：

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

.breakpage{
分页符后：始终；
}

因此，如果打开页面并使用inspect元素进行检查，您可以看到jQuery正在工作，并且每隔第四行添加一个类。
但是，当我尝试打印时，分页符在Google Chrome中不起作用（在firefox中工作正常）

有人能解释一下代码有什么问题吗

---

谢谢。

在CSS中尝试以下内容：

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

---

在CSS中尝试以下内容：

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

你能看看这个页面是否有用吗？这可能与

tr

是

display:table行而不是
display:block
有关
显然，Chrome只将分页符应用于块级元素

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

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


如果我缩小页面的边距，分页符就不会落在下一页上，但如果你在卡片上随意调整大小，也会解决这个问题，这样你就不会有一个完全空白的页面了。你能看看这个页面是否有用吗？这可能与
tr
是
display:table行而不是
display:block
有关
显然，Chrome只将分页符应用于块级元素

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

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


如果我缩小了页面的边距，则分页符不会出现在下一页上，但通过调整卡片的大小也会解决这一问题，因此您的页面不会完全为空
您的网站链接似乎没有任何作用，页面仍然为空。很抱歉，我已更正了链接，请立即尝试。谢谢你不能用边距或填充物吗？有什么具体的原因吗？@ygssoni您添加breakpage类的jquery不完全起作用，我认为，它也会将它放在卡中的每四个tr上（这一行：कर्मचारी आईडीः123456789“例如）您的网站链接似乎没有任何作用，页面仍然为空。很抱歉，我已更正了链接，请立即尝试。谢谢你不能用边距或填充物吗？有什么具体的原因吗？@ygssoni您添加breakpage类的jquery不完全起作用，我认为，它也会将它放在卡中的每四个tr上（这一行：कर्मचारी आईडीः123456789“例如）谢谢。但这在firefox上也很好，但在Chrome上却不行。我正在搜索google chrome的解决方案。您是否删除了jQuery？此解决方案可能会有所帮助，谢谢。但这在firefox上也很好，但在Chrome上却不行。我正在搜索google chrome的解决方案。您是否删除了jQuery？此解决方案可能会有所帮助