title: Bootstrap 4 responsive table breaks when printed
body: <p>I have an app with many long tables, with different numbers of columns. While I solved the display issues with <code>.table-responsive</code> Bootstrap class, I run into several issues when preparing the stylesheet for the printable version.</p>
  
  <p>Here's my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>%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
  </code></pre>
  
  <p><strong>CSS</strong> (the relevant part)</p>
  
  <pre><code>@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 }
  }
  </code></pre>
  
  <p><strong>Issues</strong></p>
  
  <ul>
  <li>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 <code>zoom: .95</code>)</li>
  <li>The last row on the page gets often cut in half despite the <code>tr { page-break-inside:avoid !important; page-break-after:auto }</code></li>
  <li>Table headers which get repeated at the beginning of each page overlap with table rows</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/coyRR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/coyRR.png" alt="enter image description here"></a></p>
  
  <p><strong>Attempted solutions</strong></p>
  
  <ul>
  <li>Modifications of <code>*{zoom: ...}</code> value</li>
  <li>Modifications of <code>table, th, td {font-size: ...}</code></li>
  <li>Using <code>max-width: fit-content(..%)</code>; tried both on <code>.table-responsive</code> and <code>table</code></li>
  <li>using <code>table { page-break-inside:avoid }</code>: it solves the problem with breaking rows and overlapping headers, but generates a huge gap before the table </li>
  </ul>