How to move a table to a new sheet?

Question

css

I create an A4 page, on this page I display data from the database in the form of a table. But the fact is that there can be so much data that they won’t fit on the page in the end.

Page:

<div class="A4">
  Тут таблица
</div>

Styles:

.A4 {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  padding-left:60px;padding-right:60px;
    padding-top:30px;padding-bottom:60px;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
 
  box-sizing: border-box;
  font-size: 12pt;
}
 
@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }
  size: A4 portrait;
}
 
@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .A4 {
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
  }
  .noprint {
    display: none;
  }
  .enable-print {
    display: block;
  }
}

Script to create a new sheet on overflow:

var max_pages = 100;
var page_count = 0;
 
function snipMe() {
  page_count++;
  if (page_count > max_pages) {
    return;
  }
  var long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
  var children = $(this).children().toArray();
  var removed = [];
  while (long > 0 && children.length > 0) {
    var child = children.pop();
    $(child).detach();
    removed.unshift(child);
    long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
  }
  if (removed.length > 0) {
    var a4 = $('<div class="A4"></div>');
    a4.append(removed);
    $(this).after(a4);
    snipMe.call(a4[0]);
  }
}
 
$(document).ready(function() {
  $('.A4').each(function() {
    snipMe.call(this);
  });
});

As a result, when overflowing with text, a new sheet is created on which the text continues.
But if I get a table larger than A4, then everything is bugged and the overflowing table just starts to climb onto the next sheet, which already has text. Is it possible to somehow break the table with the transfer to a new sheet?