CSS Print Issue: In Internet Explorer 8, page-break-before attribute disrupts table header repetition

Having come across the above-mentioned issue in a report that I generated and need to print from an ASP.NET application.

I've made a simplified version of it to try and pinpoint the problem.

Please review. When you preview the page in the browser's print preview, you will notice that the code highlighted in bold prevents the table header from repeating. Remove the page-break-before property and the header should reappear.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html>
<head>
    <title></title>

        <style type="text/css">

        @media print
        {

        thead { display: table-header-group; }
        tfoot { display: table-footer-group; }
        tbody {display: table-row-group; }

        }

    </style>

</head>

<body>

<div style='margin-left: auto; margin-right: auto; width: 602px; border: 0px solid #000000; padding: 0px 5px 5px 5px; font-size: 10pt; font-family: Tahoma'>

<table style="font-size: 12pt; font-family: verdana">
<thead>
<tr><th align="center">HEADER</th></tr>
</thead>
<tbody>
<tr><td>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in tellus ante, eu pharetra neque. Pellentesque a blandit odio. Donec porta sodales arcu vitae commodo. Praesent eu dolor justo. Cras facilisis, tellus sit amet laoreet blandit, libero nibh pharetra lacus, nec sagittis odio tortor quis leo. Quisque rhoncus nisi at urna tempor feugiat. Sed fermentum augue ultricies nunc facilisis vel dignissim ante dapibus. Mauris auctor, lorem sit amet vestibulum ultrices, erat neque fringilla lacus, at laoreet sem risus pulvinar enim. Proin laoreet pellentesque neque, et elementum magna volutpat vitae. Curabitur et nulla velit, ut tincidunt ante. Proin ac nulla sit amet odio rutrum viverra a in nibh. In hac habitasse platea dictumst.
<br /><br />
Pellentesque eu lacus non nisi ornare viverra. Quisque arcu nunc, pretium in feugiat et, tristique venenatis odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc arcu velit, suscipit sit amet porta vel, volutpat id ante. Mauris et nulla dui. Cras elementum posuere euismod. Donec ante dui, molestie non tempus quis, fermentum quis tellus. Proin viverra tellus quis lectus pharetra ut iaculis neque pharetra.
<br /><br />
Sed sed gravida tellus. Etiam pulvinar nibh quis est tempus dapibus eu quis eros. Etiam vel urna nunc. Suspendisse potenti. Aliquam sit amet libero nec neque adipiscing feugiat quis non odio. Fusce malesuada magna et orci egestas eget lacinia erat adipiscing. Proin vitae euismod elit. Cras ut sem nisl. Ut ornare dolor at erat dignissim eu cursus tortor ullamcorper.
<br /><br />
Suspendisse vel odio a elit sagittis porta et vitae justo. Nam quis sodales neque. Donec magna sem, faucibus et semper sit amet, adipiscing sit amet mi. Vestibulum non neque ligula, vitae luctus nulla. Mauris quis libero pulvinar justo iaculis lacinia. Donec gravida eleifend tortor. Maecenas tristique iaculis nunc, eu sagittis dolor interdum et. In hac habitasse platea dictumst.
<br /><br />
Duis orci leo, dapibus vestibulum luctus nec, accumsan tempor dolor. Donec blandit venenatis erat, et volutpat quam hendrerit eu. Suspendisse potenti. Quisque risus nulla, malesuada sed semper ac, molestie nec est. In nec dignissim sem. Nulla enim nunc, eleifend eu fringilla sagittis, pellentesque non urna. Sed mi diam, ullamcorper et accumsan quis, placerat ut nisi. Nunc purus neque, semper non posuere ut, vestibulum vel odio.
<br /><br />
Maecenas aliquam sodales eros, sed faucibus mauris mattis eget. Nulla erat lectus, luctus id fermentum eu, posuere ac tellus. Pra...

Answer №1

You can try using this alternative solution to address your issue. However, it is strongly recommended not to combine page-breaking properties with tables as advised by w3schools

View the code snippet here: jsfiddle

 <table style="font-size: 12pt; font-family: verdana; page-break-before: always">
 <thead>
 <tr><th align="center">HEADER</th></tr>
 </thead>
 <tbody>
<tr><td>

I have created a separate table specifically for the desired page break location and applied the style of page-break-before: always on that table.

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

Ensuring thread safety while adding an item to a list

While it is generally understood that a List is not thread safe, there may not be any issues with adding items to a list if the threads do not perform other operations on the list, such as traversing it. For example: List<object> myList = new List& ...

When the JavaFX ComboBox drop-down opens in an upwards direction, the border appears incorrectly

While working with Java 8, I encountered an issue with the "javafx.scene.control.ComboBox" where if it doesn't have enough room below, it pops up instead. Strangely, the border styling of the elements still behaves as if it should pop down. Is there ...

"Create a stunning backdrop with animated wave effects using JavaScript

I am currently using three.js to create a waves canvas animation, but I am unsure how to eliminate the background-color (only the background-color) of the canvas. if (WEBGL.isWebGLAvailable() === false) { document.body.appendChild(WEBGL.getWebGLErrorMes ...

Why isn't my axios login get request functioning as expected?

I am currently working on a login-page for a school project. I am using vue.js and have been attempting to make a get-request using axios. However, I am facing an issue where I cannot even enter the .then() block as the last thing displayed is alert(TEST1) ...

Adjust the size of the background image using a media query

.logo { background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif); background-size: 100%; } @media(max-width:767px) { .logo { background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/te ...

"Place label and input fields side by side for a streamlined mobile display experience

My goal is to have the label and input field appear on the same line when there is enough width, but on separate lines when the width is too small. I have achieved this functionality, you can see it in action on this jsFiddle. Here is the HTML Code: < ...

When JSF renders bootstrap buttons, they appear without any horizontal padding

There is a strange behavior that I cannot explain... I am working with a series of buttons: <h:commandButton value="foo" actionListener="#{foo.foo}" styleClass="btn btn-danger"> <f:ajax render=":form"></f:ajax> </h:co ...

Keep JS Accordion open when links are clicked

Utilizing PHP, I am fetching items from a database and creating an HTML table to display each item. Adjacent to the HTML table, there is a side menu with an accordion function implemented in JavaScript. Within each accordion section, there are links for ...

Tips for populating an asp:DropDown using client-side code

In the web-page I'm working on, there are two <asp:DropDown> controls: When a user selects a Country, I want to populate the list of states. Strategy #1 - OnSelectedIndexChanged Approach The initial step was straightforward: When the first ...

Ways to connect to a minimized hidden tabindex component using the hashtag symbol

I have created a glossary with terms in columns and hidden texts using plain css/html. Each entry is structured like this: A term followed by a hidden explanation, revealed on focus without the use of Java or JS. Instead of using :hover, I utilize :focus ...

What is the best way to automatically set the focus to a control?

I have a login control and a create user control on my webpage. I want the cursor to be in the username text box of the login control when the page loads. How can I achieve this? <asp:LoginView ID="LoginView1" runat="server"> <Logge ...

I'm having trouble retrieving a download link from a website after parsing it in Python. The href attribute shows as javascript:void(0) instead of a proper link. How can I extract the

I am currently working on developing a YouTube downloader tool that is capable of taking a YouTube video URL, utilizing requests and BeautifulSoup to scrape the download link of that particular video from an online video downloading platform. Website util ...

How to ensure scrollbar adjusts to increasing height when using scroll:auto?

My <div> element has the style property scroll:auto. Whenever text is added to the <div> and the content height exceeds the default height, I find myself having to scroll down in order to see the latest lines of text that have been added. What ...

Issues with Bootstrap Columns when toggling hide and show functionality

Currently utilizing Bootstrap 4.3.1, attempting to switch between two divs where one is displayed and the other is hidden. Functionality is as expected, however, there seems to be an issue with Bootstrap columns not rendering properly within the initially ...

Are numerous h1 tags allowed?

Many debates have arisen regarding the use of multiple h1 tags on a single web page. What if additional semantic meaning is provided using hgroup, article, header, footer, and section tags? Despite numerous discussions, a definitive answer remains elusiv ...

"Is there a callback function that occurs after __doPostBack()

Whenever I need to refresh an UpdatePanel using Javascript, I follow this method: refreshPanel = function (data) { __doPostBack("PanelName", ""); updatePanelWithData(data); } Within the UpdatePanel, there is a <select> element that must have a ...

Tips for creating a CSS layout with two columns using the flex property

I'm having trouble getting my images to display in 2 columns within the container div. Right now, they are only showing up in a single column with an empty space beside them, as you can see in the preview image. html <div class="container ...

What is the best way to seamlessly integrate a Bootstrap Navigation and Carousel within a 100vh space?

I'm having trouble getting the bootstrap navigation and carousel to fit perfectly on the screen without any overflow. My goal is to have both elements occupy 100vh seamlessly, with no scrolling necessary. My first attempt was adding img-fluid: 100vh; ...

My gadget is caught in a loop, the conditions are failing to function properly

I recently developed a basic web watch application using Tizen Studio specifically designed for Gear watches and similar devices. Within this web watch, I implemented 6 conditions that are intended to change the background of the watch based on the curren ...

Alter the text upon hover, then revert back to the original text

I am working on a comment system where each comment includes a button that usually shows the number of replies it has. I am looking to create an effect where, when a user hovers over the button, the text changes from "3 replies" to "Reply!", and then rever ...