Bootstrap 4 responsive table breaks when printed

I have an app with many long tables, with different numbers of columns. While I solved the display issues with .table-responsive Bootstrap class, I run into several issues when preparing the stylesheet for the printable version.

Here's my code:

HTML

%table.table.table-borderless
  %thead
    %tr
      %th Random header text
      -# a bunch of %th elements here
  %tbody
    %tr 
      %td
      -# a bunch of %td elements here

CSS (the relevant part)

@media print {
  @page {
    size: A4 landscape;
  }
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: normal !important;
    zoom: .95;
  }
  .alert, .paginate, ... {
    display: none;
  }

  div {
    margin: 0 auto !important;
  }
  table {
    border-collapse: collapse !important;
    margin: 0;
  }

  table { page-break-inside:auto }
  tr    { page-break-inside:avoid !important; page-break-after:auto }
  thead { display:table-header-group }
}

Issues

• There's a strange gap between rows that are not at the end of the page (but ptobably would be if it wasn't for the zoom: .95)
• The last row on the page gets often cut in half despite the tr { page-break-inside:avoid !important; page-break-after:auto }
• Table headers which get repeated at the beginning of each page overlap with table rows

Attempted solutions

• Modifications of *{zoom: ...} value
• Modifications of table, th, td {font-size: ...}
• Using max-width: fit-content(..%); tried both on .table-responsive and table
• using table { page-break-inside:avoid }: it solves the problem with breaking rows and overlapping headers, but generates a huge gap before the table