Remove height limit for printing thead
Asked Answered
L

0

7

I encountered something weird as I was playing around with this. In Firefox, when the height of a div inside the thead is more than 252px, the header will not get repeated. Tried with Chrome, issue happens at about 262px. Has anyone encountered this before? Is there a way to ignore or reset this limit?

@media print {
  @page {
    size: auto;
    /* auto is the initial value */
    margin: 0mm 0mm 0mm 0mm;
    /* this affects the margin in the printer settings */
  }
  thead {
    display: table-header-group;
  }
  #pgbrk {
    page-break-after: always;
  }
}

@media screen {
  @page {
    size: auto;
    /* auto is the initial value */
    margin: 0mm 0mm 0mm 0mm;
    /* this affects the margin in the printer settings */
  }
  thead {
    display: block;
  }
}
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset="utf-8" />

<table>
  <thead>
    <tr>
      <td>
        <div style="border:1px solid;width:300px;height:250px;">head</div>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
        <div>body</div>
      </td>
    </tr>
  </tbody>
</table>
Lampion answered 22/1, 2018 at 19:2 Comment(3)
Any solution to this problem yet?Jessy
Any solution to this yet ?Sumerian
I was also facing the same problem, I have answered it here - #68101904Sumerian

© 2022 - 2024 — McMap. All rights reserved.