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

Question

I have created a Page with the Datalist control in it, which generates "ID cards".
You can see the working example here.

The problem is that I want to break the page after every 4th row of Datalist.

So to execute this, I am using this jQuery code:

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

        })
    </script> 

And the CSS class:

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

So if you open the page and check with the inspect element, you can see that the jQuery is working, and it does add the class on every 4th row.
But still, when I try to take a print, the page break is not working in Google Chrome (working fine in firefox).

Could someone please explain what is wrong with the code?

Thank you.

Answer 1

How to achieve page break in HTML table for Google Chrome? can you see if this page helps? It might have something to do with a tr being display: table-row instead of display: block Apparently Chrome only applies the page break to block level elements.

Edit: I've just tested that setting the following fixes it:

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

If I shrunk the margins of the pages the pagebreak didn't fall on the next page, but playing around with the sizes of your cards would fix this too so you don't have a fully empty page