When printing a table in HTML/CSS, only the header will appear on the empty page

I'm struggling to figure out why there are two pages, one blank and one with just the table header in this document.

The content looks fine otherwise, but I can't seem to remove these extra pages.

Here is the full HTML code:

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style media="print" type="text/css">

h1:not(:first-child) {
...

body > *:last-child {
   margin-bottom: 0 !important; }

a.absent {
   color: #cc0000; }
...

I am using IE10 because Chrome and Firefox are having issues with the page-break-* properties and orphans / widows.

Answer №1

When the page-break-avoid property is applied to a table, it instructs the formatting engine not to break the page within the table. It's important to understand that formatters typically operate in a "go forward" manner, meaning they do not go back and try things again.

In this scenario, the entire table has page-break-avoid set, and the table itself spans about 2.5 physical pages. The formatter first attempts to fit the table on the current page but fails due to its length. It then moves to a new blank page and tries again, repeating this process until it finally places the table on a subsequent page.

However, there are additional constraints present, such as using page-break-after="avoid" on rows. This further complicates the layout and can result in the rows not fitting on a single page.

The combination of these rules creates a highly restricted set of conditions. It seems contradictory to request that a table not break inside it while also keeping all rows together, especially with a lengthy table like the one described.

There is also a concerning set of rules specified for paragraph tags when it comes to pagination. It essentially mandates that at least 10 lines must be kept together without any breaks before or after. This could lead to similar issues if multiple paragraphs adhere to these guidelines in sequence.

Your statement regarding the visibility of table headers on all pages seems to refer to ensuring they appear whenever the table is placed, rather than every single page. Removing some of the constraints mentioned, particularly those related to avoiding page breaks within tables or rows, should improve the display of table headers without unnecessary blank pages.

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

What are the recommended web-safe colors to use for styling an <hr> element?

Having an <hr> element with the color #ac8900 is what I require. When I apply the style in the traditional way <hr color="#ac8900"> it functions perfectly. However, the expectation is to style everything using CSS, so I attempted the followin ...

The Bootstrap navigation bar is experiencing issues and is not functioning properly, as the classes are not

<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" d ...

How can the parent div's height be determined by the child div when using position: absolute?

I am struggling with setting the height of a parent div that contains a nested child div with absolute positioning. The child div has a fixed height of 652px, but I cannot seem to get the parent div to match this height. I have tried adjusting the clear an ...

Guide on altering the background color of dynamically generated textboxes in R Shiny

textInput(paste0("inp1-", wid),label = NULL,value = record$Current_week) This code was used to dynamically generate text input boxes, where the id for each box is determined by a number called wid. I attempted to change the background color using the fol ...

Implementing JavaScript validation to alter the background image

I encountered a small issue while working on my project. I was designing a form in HTML using JavaScript, and for the input fields, I decided to use a background image with padding on the left to enhance its appearance. Everything seemed fine until I ran i ...

Sync Data Automatically from SQL Database

For the past two months, I've been researching how to achieve an effect similar to the auto-updating sales on the page. So far, I haven't had any luck. I do have a PHP file that counts the number of results in a database and displays them as a n ...

Obtaining HTML data with ajax within a WordPress post

Greetings! I've been putting together a website and I'm eager to include a unique timeline in each of my posts. I'm utilizing WordPress for this project. However, since the timeline I want to insert will vary from post to post, I am unable t ...

Connecting onClick event to a dynamically created div using Dojo

While working with dojo 1.9.2, I encountered an issue when trying to add an onClick function to a dynamically created piece of HTML code like so: clickableDiv = "<div data-dojo-attach-point=\"testBtn\">Click Me!</div>"; self.racks.in ...

Certain parts of the CSS grid are not aligning properly within the grid lines

I'm having trouble with my CSS grid. The red section fits in the first square, but the rest of the content seems to be out of place in the grid. I'm new to all this and I can't figure out what I'm missing. I've tried everything but ...

Issue with the JQuery Lightbox 2 Plugin

I'm currently in the process of developing a gallery using jQuery Lightbox 2 (visit the plugin page here). I am encountering an issue where the navigation entries remain visible even when an image is selected (view example here). The navigation is cre ...

Creating a mechanism that fetches web links and automatically substitutes the URL with the corresponding title of the webpage

Just the other day, I noticed that putting a link in my profile resulted in it being replaced by the exact title of the question. This got me thinking, how exactly do they accomplish this? My hunch is that they achieve this by using ajax to send the link ...

When attempting to use the .split method, an error is thrown stating that addEventListener is not

I'm attempting to create a table that automatically fills in the next input when I select options from MySQL. However, when I run this code, I get an error saying "addEventListener is not a function." I'm not very familiar with JavaScript, so I&a ...

I am looking to integrate a WordPress blog post into my Bootstrap website

Is there a way to showcase the 3 most recent posts from my WordPress blog (www.xyz.wordpress.com) on my Bootstrap HTML website without using PHP? Feedburner got me close, but I'm limited in CSS styles and don't want the "Headline by Feedburner" ...

Is it possible to dynamically update the contents of a modal body and modal footer using

I'm dealing with a modal that dynamically populates two sections: modal-body and modal-footer. However, the issue is that only the content of modal-body changes dynamically while modal-footer remains static. Here's an example of the HTML code (w ...

The MaterialUI TextField isn't behaving as expected when attempting to change the background color

Currently, I am facing a challenge with setting the background color for my `TextField` components within the app I am developing. Despite adding custom RGB values using `style={{background: "rgb(232, 241, 250)"}}`, the component continues to dis ...

Having trouble getting the Facebook like button to display on my website using an iframe in the markup

I gave it my all to try and get it to work, but unfortunately, I was unsuccessful. This is the approach I took. First, I followed the instructions provided on https://developers.facebook.com/docs/plugins/like-button. Next, I copied and pasted the iframe ...

Merging Fewer with Visual Studio 2012

Combining all Less files into a single stylesheet? After following the instructions in the above link, I have successfully merged my Less files together for easier CSS reading during development. However, I would like to ensure that end users only need to ...

Why is my code throwing an error stating "Unable to assign value to innerHTML property of null"?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="container">Lorem ipsum</div&g ...

After converting my HTML elements to JSX in Next.js, I am experiencing issues with my CSS files not being applied

Hey there, I'm currently working on a website using Next.js. I've converted the HTML elements of a page to JSX elements but for some reason, the CSS of the template isn't showing up. I've double-checked all the paths and even updated th ...

Struggling to properly implement background images in a React application using Tailwind CSS

I'm currently developing a React application using Tailwind CSS for styling. In my project, I have an array of items called "trending," and I'm attempting to iterate through them to generate a series of divs with background images. However, I am ...