Print page headers are being overlapped by THEAD elements

I have created a table and am considering using the thead as page headers if the table spans multiple pages. However, I am encountering an issue where the content of the table overlaps with the table header on the second page.

Here is a snippet of my HTML code:

        <div class="row page-break-before">
             <div class="col-sm-6"  style="padding-right:0; border-right:2px solid #000000">
             </div>
             <div class="col-sm-6" style="padding-left:0;">
             </div>
             <div class="col-sm-6" style="padding-right:0; border-right:2px solid #000000">
             </div>
             <div class="col-sm-6" style="padding-left:0;">
             </div>
             <div class="col-sm-12" style="border-top: 2px solid #000000;">
                <table class="table table-condensed">
                                    <thead>
                            <tr>
                             <th colspan="9">Header Row 1</th>
                            </tr> 
                            <tr>
                             <th>Header col 1</th>
                             <th>Header col 2</th>
                             <th>Header col 3</th> ...
                             <th>Header col 9</th>
                            </tr> 
                        </thead>
                        <tbody>
                        </tbody>
                </table>
 
            </div>
        </div>

The CSS for handling page breaks is as follows:

    table {
    page-break-inside: auto
}

thead {
    display: table-header-group
}

tfoot {
    display: table-row-group
}

tr {
    page-break-inside: avoid
}

The print preview shows the overlapping issue, which you can view here.

I have tried removing the div columns above the table, but the issue persists. I also attempted different arrangements of divs with bootstrap col classes, but nothing seems to work. Is there a specific way the divs should be arranged to prevent the overlap of page headers with the table content?

Answer №1

Recently encountered this issue. I discovered a solution that resolved it for me, however, the thead element is unfortunately only visible on the initial page:

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

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

AngularJS creates a new window in your application

I have created two html pages named web.html and addroute.html. Both pages are built with bootstrap. The angularjs script includes two controllers: webctrl and addctrl. In web.html, there is a button that, when clicked, opens the addroute.html page. I am ...

Display XML information when a row in the table is selected

I am working with an XML data sheet and utilizing ajax to extract information from it in order to generate specific tabs and construct a table of data. However, I am encountering a challenge when attempting to display details in adjacent divs once a row of ...

The data type 'string' cannot be assigned to the data type 'Position'

Currently, I am in the process of converting React js to typescript. The component being used is a Class Component. I would like to obtain CSS settings through props and apply them to an element. How can I resolve this issue? render(){return( <span st ...

Adjusting the height of content in Angular Material 2 md-tab

I've recently started working with angular material and I'm facing an issue while trying to implement md-tab into my application. The problem is that I can't seem to style my tab content to take up the remaining height of the screen. Could s ...

The slideToggle function in jQuery seems to have trouble working on a Joomla platform, however, it functions perfectly on jsbin

I'm currently working on a website and I'm trying to implement the jQuery slideToggle feature to move some blocks. Everything seems to be working fine when I test the code on jsbin.com, but for some reason, it's not functioning properly on m ...

CSS opacity is currently not working as intended

Why doesn't the opacity work here? I've tried using hex and rgba colors, but nothing changes. Even adding classes to tr and td didn't help... First attempt: .done{ background-color: rgba(0,175,51,5); color:white; opacity: 50; ...

How to display a PDF file stored in the documents directory of an iOS device with Phonegap

I'm encountering an issue when it comes to displaying a PDF using HTML, PhoneGap, or JavaScript. The web application I'm working on is developed in Sencha Touch 2. Here's exactly what I need: I need to display a PDF file located in the d ...

What is the best way to trigger a sound to play once when the document is loaded?

I was looking for an easy and straightforward method to play a sound as soon as the document is loaded. After browsing through various online resources, I couldn't find a clear explanation. Can someone please assist me on how to create this in a brow ...

MVC Template with a Defective BootStrap

Struggling with creating an MVC master template along with sub-pages using Bootstrap. Sadly, I seem to have messed it up and can't quite figure out where the problem lies. You can check out my test website at Do you see how the different sections a ...

Tips on making a dropdown select menu expand in a downward direction

I'm currently using a select element to choose options from a dropdown list, but because of the large number of items, the list displays in an upward direction instead of downwards. I am working with Bootstrap. I have reviewed other code samples with ...

What is the process for transforming information from a database into a clickable hyperlink?

My course list includes the following: SE1111 SE2222 SE3333 I want to display this list on my webpage and have it redirect to a page where the course name is saved for future use. Here's what I've tried so far: <div id="join_courses" clas ...

Modify the color of links when hovering using CSS

I am currently utilizing VScode and attempting to modify the link color on :hover. I am also interested in adding a grow Hover Effect. Here is my code snippet: .subareas a.link { margin: 0 0 10px 10px; float: right; height: 30px; line-height: 29 ...

Request a HTML variable and send it to JavaScript

My latest project involves a Binary to Decimal Calculator that is now fully functional, but I am looking to integrate an HTML input into it. <html> <input placeholder="00000000" name="htmlinput"></input> <input id="clickMe" type="butt ...

Column Flow in CSS Grid: Maximizing Auto-Fit - How to Optimize Row Layouts?

Having some trouble understanding how auto-fill and fit work in grid layouts. I am familiar with basic CSS, but new to working with grid layouts. I have a set of checkbox items with labels that I want to display in columns depending on screen size, with c ...

Retrieve information from a span element located within a div container

Being new to web scraping, I am encountering what may seem like a trivial issue. Below is the HTML code in question: <div class="price-container clearfix"> <span class="sale-flag-percent">-40%</span> <span class="price-box ri"> ...

Enhancing tabbing accessibility with order classes in Bootstrap 4 for improved navigation

Having trouble with the bootstrap order classes like order-2 order-md-1 in conjunction with tab order for accessibility reasons. My goal is to align the tab flow with the visual flow. Take a look at this code: <div class="row"> <div class="c ...

Creating responsive layouts with flexible image sizes using Flexbox

My exploration of Flexbox began by testing it on an existing template sourced from a previous stackoverflow question. I am currently focusing on adjusting the image size to better fit within its parent div. max-width: 50px; height: auto; margin:auto; ...

Enhance User Experience by Making Each Background Slideshow Image Clickable

I want to create a background image slideshow for my photography portfolio. Each image should fade in and link to its respective gallery. I also want the text box to fade with the images and link to the corresponding gallery. The challenge is adding the li ...

Create a custom overlay for an image that is centered horizontally and does not have a fixed width

I'm working with this HTML setup: <div class="container"> <img class="image" /> <div class="overlay"> <div class="insides">more content here</div> </div> &l ...

Twig: A guide to showcasing HTML content within block titles

Within my Symfony2 project, I am utilizing various twig templates. One of these templates contains a block labeled title. {% block title %}{{ announcement.title }}{% endblock %} The issue arises when the variable {{ announcement.title }} contains HTML ta ...