title: THEAD is overlapping with page contents on Print page headers
body: <p>I design a table and planning to use the thead as page headers if multiple pages there with table.
  On top of the table there are some more DIV's with some additional info is also present and while printing on second page the table content is overlapped with the  table header</p>
  <p>My html is like below</p>
  <pre><code>        &lt;div class=&quot;row page-break-before&quot;&gt;
               &lt;div class=&quot;col-sm-6&quot;  style=&quot;padding-right:0; border-right:2px solid #000000&quot;&gt;
               &lt;/div&gt;
               &lt;div class=&quot;col-sm-6&quot; style=&quot;padding-left:0;&quot;&gt;
               &lt;/div&gt;
               &lt;div class=&quot;col-sm-6&quot; style=&quot;padding-right:0; border-right:2px solid #000000&quot;&gt;
               &lt;/div&gt;
               &lt;div class=&quot;col-sm-6&quot; style=&quot;padding-left:0;&quot;&gt;
               &lt;/div&gt;
               &lt;div class=&quot;col-sm-12&quot; style=&quot;border-top: 2px solid #000000;&quot;&gt;
                  &lt;table class=&quot;table table-condensed&quot;&gt;
                                      &lt;thead&gt;
                              &lt;tr&gt;
                               &lt;th colspan=&quot;9&quot;&gt;Header Row 1&lt;/th&gt;
                              &lt;/tr&gt; 
                              &lt;tr&gt;
                               &lt;th&gt;Header col 1&lt;/th&gt;
                               &lt;th&gt;Header col 2&lt;/th&gt;
                               &lt;th&gt;Header col 3&lt;/th&gt; ...
                               &lt;th&gt;Header col 9&lt;/th&gt;
                              &lt;/tr&gt; 
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                          &lt;/tbody&gt;
                  &lt;/table&gt;
   
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>The page level CSS is like below</p>
  <pre><code>    table {
      page-break-inside: auto
  }
  
  thead {
      display: table-header-group
  }
  
  tfoot {
      display: table-row-group
  }
  
  tr {
      page-break-inside: avoid
  }
  </code></pre>
  <p>The generated printpreview with overlapping is like</p>
  <p><a href="https://i.stack.imgur.com/CweHD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CweHD.png" alt="enter image description here" /></a></p>
  <p>If i remove the 4 div columns above the table  [ The ones with col-sms-6 class ] this issue seems to be resolved.
  I tried to keep the 4 divs inside a row , but still no luck . Tried to place and empty row before the start of table still no luck
  Is something wrong in the way DIV with bootstrap col classes are arranged which is causing the overlap of page headers with table content</p>