continuously print the table heading

I'm having trouble with displaying table headings when printing a table with many rows and columns. The table heading displays on the first page, but not on subsequent pages. I searched Google for solutions and tried various methods found on websites, but still couldn't fix the issue. Here is my CSS:

<style type="text/css" media="print" >
table td {
    border-bottom:1px solid gray;
}
th {
font-family:Arial;
color:black;
background-color:lightgrey;
}
thead {
    display:table-header-group;
}
tbody {
    display:table-row-group;
}
</style>

Here is my HTML code:

<table border="0" cellpadding="2" cellspacing="0">
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>First Name 1</td>
            <td>Last Name 1</td>
        </tr>
    </tbody>
</table>

If anyone has a solution or can help me troubleshoot this issue, I would greatly appreciate it. Thank you.

Answer №1

For a quick solution, consider incorporating the following snippet into your CSS:

@media print {
   thead {display: table-header-group;}
}

Answer №2

Check out this example below. To start, ensure you clearly outline the table header and table body:

   <table>
   <thead>
  <tr>
     <th>Primary Title</th>
     <th>Secondary Title</th>
     <th>Third Title</th>
  </tr>
 </thead>
 <tbody>
  <tr>
     <td>uno</td>
     <td>dos</td>
     <td>tres</td>
  </tr>

    . . .

  <tr>
     <td>cinco</td>
     <td>seis</td>
     <td>siete</td>
  </tr>
</tbody>
</table>

If you desire consistent printing functionality, be sure to make a direct specification. Then, just apply a simple line of CSS for implementation:

              @media print {
thead {display: table-header-group;}
}

This action will prompt most web browsers to display the contents of thead element on each page when printed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to keep jQuery horizontal submenu open when clicking on the menu

Seeking assistance with a menu issue. I have a horizontal menu with subitems that display when clicked, but having trouble with the submenu behavior. When clicking on a submenu item, I want it to remain open and show the related items underneath it. For ex ...

Creating a shadow effect within an element: a step-by-step guide

I've been experimenting with creating an inner shadow effect on an image, but I can only seem to achieve an outer shadow. Just for clarification, .showSlide is a div element. .showSlide { display: block; width:100%; height:350px; } .showSlide img { ...

An always-visible navigation menu

After exploring various resources related to the same topic, such as sticky navigation bars and others, I noticed that all the solutions provided involved the use of this link http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js. However, inc ...

The propagation of SVG events from embedded images via the <image> elements

I'm currently developing a diagramming tool using HTML, CSS, and Javascript with SVG for the drawing canvas. This tool consists of predefined "building blocks" that users can place on the canvas, rather than allowing free-hand drawing of shapes. Each ...

Sending Profile Picture and Description to PHP using AJAX and jQuery

I have been struggling to upload user images via AJAX to a PHP database. Despite trying various tutorials and examples, nothing seems to work with my code. The codes function properly without AJAX, but I need the upload process to be seamless for users by ...

Is there a way to determine the number of options required for a select tag to become scrollable?

Please review these two <select> elements: <select> <option>one</option> <option>one</option> <option>one</option> <option>one</option> <option>one</option> <option&g ...

How to Align <ul> to the Right in Bootstrap 4

Looking to align a list to the right in the header section, here is the code snippet: <div class="collapse navbar-collapse" id="app-header-nav"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class=" ...

AngularJS selector, offering similar functionality to jQuery

There are 3 div elements with the same class in an HTML code snippet: <div class="hide"> </div> <div class="hide"> </div> <div class="hide"> </div> In jQuery, all the div elements can be hidden with a single code sta ...

Mysterious anomaly observed: Peculiar trajectory detected in canvas image during left

I have a fascinating HTML5 Canvas that showcases the movement of two identical objects to both the right and the left. Although the right side operates flawlessly, I've noticed that the left object leaves behind an intriguing trail with a hint of gree ...

What is causing the discrepancy in CSS line-height when text spans multiple lines?

Can anyone explain why there is extra space above the first paragraph in this HTML and CSS code, but not the second or third? The line-height is consistent for all three paragraphs. How can I adjust it so that there is equal spacing around all three paragr ...

incorporating HTML attributes without specified values in .NET

Is there a way to include the multiple attribute in a select element using .net? I attempted the following approach: If MultiSelect Then drpSelect.Attributes.Add("multiple", "true") End If However, technically speaking, the HTML should only require the ...

How to create an image overlay in Angular with the help of Bootstrap

As a beginner in web development, I am utilizing Angular in conjunction with Bootstrap for a practice project. My goal is to create a header component and integrate it into my app.component. Within the app.component, I aim to have a background image coveri ...

Exploring the potential of utilizing the "wait" function in Selenium WebDriver for

I want to automate a test on my website using the Selenium WebDriver for JavaScript. How can I approach running tests here with content that may not be ready when the page loads, such as data coming from an external API? In my case, the content is loaded ...

Getting the value of a variable within the scope of AngularJS can be achieved by utilizing

I have an ng-repeat directive in my code that displays slides. Here is a snippet of the data: slides = [{ src: "/sikiosk/slidedata/Global/NA/USNS/Cafeteria/5000_24.jpg", interval: 5000 }, { src: "/sikiosk/slidedata/Global/NA/USNS/Cafeteria/5000_login-regi ...

Change the font weight to bold for the selected item in the Javascript menu, and

I am working on an ASP MVC application that includes a menu with JavaScript functionality to navigate between pages. Currently, when I click on a menu item, it becomes bold and remains bold even when another menu item is selected. This results in all menu ...

What steps should I take to ensure that the navbar is responsive and mobile-friendly?

After creating a navigation bar in an ejs file, I included it in all the files. The issue is that it looks fine on desktop view but does not respond well on mobile devices. There is some space left on the screen and it's not utilizing the entire width ...

Implementing Ng-debounce selectively for functions within an AngularJS application

I am looking to execute specific functions at different time intervals when there is a change in input. The current setup is as follows: <input type="text" name="title" ng-model="title" placeholder="Search..." ng-model-options="{ updateOn: 'defaul ...

Is it possible to categorize elements for focus and onblur events?

In my search feature, I have implemented an autocomplete div that appears when the user types in a search field. The issue I am facing is that I want the div to disappear when the user clicks outside of it. Here is what I have attempted: //SHOW THE DIV WH ...

How to Handle Date Formatting in Angular with Ionic

Utilizing the ionic framework to create a hybrid app with Angular, I have encountered an issue with a form that includes two input boxes: one for date and one for time. The date input's value is being saved in the database in this format: Tue Mar 24 ...

Ajax immediately going to the error section

I'm having trouble with my ajax as it always goes straight to the error part. Below is my code along with comments on the lines I'm unsure about: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script&g ...