What is the best method to ensure a TALL table header is repeated on every page in Chrome?

Question

What is the best method to ensure a TALL table header is repeated on every page in Chrome?

First time poster =)

I am currently facing an issue while trying to print a long table and have the table header repeat on each page. The problem arises when the height of the <thead> reaches a certain threshold, specifically 242px in Chrome 87.0.4280.88 with default margins. When the header exceeds this height, it only prints once on the first page. Adjusting the page margins does provide some flexibility, but I am looking for a workaround that would allow me to print a taller <thead> on every page without modifying the margins. I have searched for documentation regarding this issue but have not found a solution yet, so any help would be greatly appreciated.

<table>
  <thead>
    <th style='height: 242px'>if this was 241px it would print on every page</th>
  </thead>
  <tbody>
    <tr><td>anything</td></tr> <!-- repeat this process enough times to span multiple pages -->
  </tbody>
</table>

Thanks in advance!

html css google-chrome

Answer 1

Answer №1

To achieve this effect using only CSS, you can apply the following styles to target your table:

<style>
  thead {
    position: fixed;
    top: 0;
  }

  thead th {
    height: 380px;
  }

  tbody tr:nth-child(25n + 1) td {
    padding-top: 380px;
  }

  tbody tr:nth-child(25n + 26) {
    page-break-before: always;
    break-before: always;
  }
</style>

This CSS code fixes the position of thead so it shows on every page, adds a top padding equal to the height of thead to every 25th td in tbody, and includes a break-before property for every 25th tr except the initial one.

You can modify the nth-child selectors to match the height of your content rows accurately for proper page breaks.

Answer 2

To achieve this effect using only CSS, you can apply the following styles to target your table:

<style>
  thead {
    position: fixed;
    top: 0;
  }

  thead th {
    height: 380px;
  }

  tbody tr:nth-child(25n + 1) td {
    padding-top: 380px;
  }

  tbody tr:nth-child(25n + 26) {
    page-break-before: always;
    break-before: always;
  }
</style>

This CSS code fixes the position of thead so it shows on every page, adds a top padding equal to the height of thead to every 25th td in tbody, and includes a break-before property for every 25th tr except the initial one.

You can modify the nth-child selectors to match the height of your content rows accurately for proper page breaks.

Answer 3

Answer №2

The issue may be originating from the browser and how it interprets your website. One possible solution could involve creating multiple identical headers and using a different one on each page, even if they appear identical.

<table>
    <thead>
        <tr><th style='height: 242px'>Header 1</th></tr>
        <tr><th style='height: 242px'>Header 2</th></tr>
    </thead>
    <tbody>
        <tr><td>anything</td></tr>
    </tbody>
</table>

Another option, involving the use of php, would be to create an include where you generate a single header.html file and call it on every page. If you are interested in exploring this alternative, feel free to request more details, and I can provide an example for you.

Answer 4

The issue may be originating from the browser and how it interprets your website. One possible solution could involve creating multiple identical headers and using a different one on each page, even if they appear identical.

<table>
    <thead>
        <tr><th style='height: 242px'>Header 1</th></tr>
        <tr><th style='height: 242px'>Header 2</th></tr>
    </thead>
    <tbody>
        <tr><td>anything</td></tr>
    </tbody>
</table>

Another option, involving the use of php, would be to create an include where you generate a single header.html file and call it on every page. If you are interested in exploring this alternative, feel free to request more details, and I can provide an example for you.

Answer 5

Answer №3

 <table id="header-table">
  <thead>
    <th style='height: 242px'>Tall header</th>
  </thead>
</table>

<table id="main-table">
  <tbody>
    <tr><td>anything</td></tr> <!do this as many times as you want -->
  </tbody>
</table>

Utilizing the method above, you have the option to separate the header, and for a repetitive process, consider incorporating JavaScript libraries like jsPDF or printJS along with CSS styling in the file.

Answer 6

 <table id="header-table">
  <thead>
    <th style='height: 242px'>Tall header</th>
  </thead>
</table>

<table id="main-table">
  <tbody>
    <tr><td>anything</td></tr> <!do this as many times as you want -->
  </tbody>
</table>

Utilizing the method above, you have the option to separate the header, and for a repetitive process, consider incorporating JavaScript libraries like jsPDF or printJS along with CSS styling in the file.

What is the best method to ensure a TALL table header is repeated on every page in Chrome?

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript - Utilizing an image file in relation to a URL pathway

Adjust the parent element to match the width of the child by utilizing the "display: grid" property

Switch to display only when selected

Media query failing to adjust properly

What is the best way to assign a unique ID to every element in this situation?

What is the best way to make a Dojo TitlePane overlap using CSS?

Looking to switch up the thumbs-up button design?

Struggling to align block elements correctly after changing them to inline

Change the color of the image to black and white and then back to its original state when a specific element is hovered over

Using Jquery to Bind Multiple Events

What is the best way to integrate HTML templates into AngularJS?

Guide on forwarding from one HTML page to another in the local disk

A guide on showcasing items on an html webpage through the use of javascript

Is there a Joomla extension available that can display or conceal content upon clicking?

JSON syntax error: "r" is not a valid token at the beginning position

Deciphering HTML encoding for text fields

Bootstrap's ability to display panels of equal height across multiple rows is a game

Tips for updating the date format in Material UI components and input fields

Another element concealing an element underneath

Tips for handling numerous buttons in ionic?