Разрыв страницы в DataList (asp. net) в Google Chrome

Question

Я создал страницу с элементом управления Datalist , который генерирует «идентификационные карты».
Рабочий пример можно посмотреть здесь .

Проблема в том, что я хочу разбивать страницу после каждой 4-й строки Datalist .

Итак, чтобы выполнить это, я использую этот 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>

Итак, если вы откроете страницу и проверите с помощью элемента inspect, вы увидите, что jQuery работает, и он добавляет класс на каждый 4-й строка.
Но все же, когда я пытаюсь сделать отпечаток, разрыв страницы не работает в Google Chrome (работает нормально в firefox) .

Может кто-нибудь объяснить, что не так с кодом?

Спасибо.

Answer 1

Как добиться разрыва страницы в таблице HTML для Google Chrome? . Можете ли вы увидеть, помогает ли эта страница? Это может иметь какое-то отношение к 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;
}