Bootstrap 4响应表在打印时中断

Question

我有一个应用程序，其中有许多长表，列数不同。当我使用.table-responsive Bootstrap类解决了显示问题时，在为可打印版本准备样式表时遇到了几个问题。

这是我的代码：

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 （相关部分）

@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 }
}

问题

• 不在页面末尾的行之间有一个奇怪的间隔（但是如果不是zoom: .95，那很可能是这样）
• 尽管有tr { page-break-inside:avoid !important; page-break-after:auto }
，页面的最后一行经常被切成两半
• 在每页开头重复出现的表标题与表行重叠

尝试的解决方案

• 对*{zoom: ...}值的修改
• 对table, th, td {font-size: ...}的修改
• 使用max-width: fit-content(..%)；在.table-responsive和table上都尝试过
• 使用table { page-break-inside:avoid }：它解决了行中断和标题重叠的问题，但在表格之前产生了巨大的空白