Why does the page break persist despite setting it as "avoid"?

My table element is frequently very tall with numerous rows, and each time the browser prints the document, there is an unnecessary page break between the header and the start of the table. This issue persists even when physically printing the document.

I attempted to resolve this problem by using the following code:

table {
    page-break-before: avoid;
}

However, this code did not eliminate the page break as desired. Is there a different code I should be utilizing instead?

Please refer to the image link below to see the page break in action (the table contains more rows but only the first five are displayed):

https://i.sstatic.net/vBRI5.png

htmlcss

Answer №1

We are unable to determine the exact location of the pagebreak based on the sample provided. Your current attempt only specifies to avoid a pagebreak before the TABLE element. From the print sample, it seems like the pagebreak might be occurring before either the TABLE element or the TH element. Without viewing all of the code, it is difficult to confirm. There could be some CSS overriding the settings or there may be a pagebreak after the element preceding the table. Consider trying the same with the table and tr elements and include !important in the CSS rules.

@media print {
  table {page-break-before: avoid !important;}
  tr {page-break-before: avoid !important;}
}

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

Include draggable functionality to a seating chart that is generated dynamically

I developed a function that generates table seats dynamically with equal spacing. The issue arises when I try to drag names from a list and drop them onto the seats as children. Unfortunately, I can't seem to achieve this functionality with the dynami ...

javascriptjqueryhtmlcssjquery-ui

Activating scrolling through Javascript

A friend of mine created a web page to help me learn some JavaScript. He designed a feature where the content in each div becomes visible as soon as the user scrolls past it. However, I noticed that the content appears too late for my liking. I would like ...

javascripthtmlcssanimationscroll

The text consistently remains positioned to the right of my image

Photo Gallery Title Issue I'm working on a photo gallery project where I want to add titles underneath each image. However, I'm facing a problem where the title is appearing next to the image instead of below it. You can see the issue in this sc ...

htmlcssphoto-gallery

Using Vue's v-model on input with a dynamic reference

A brand new Vue component has been crafted by me called <input>, and it is equipped with a v-model property to handle data. The two-way data binding feature worked flawlessly but now I aim to include the current input value in the "state" so that cle ...

htmlvue.jsvue-composition-api

Is there a way to clear inline css styles added by jquery?

I've recently made changes to my responsive menu, but I'm facing an issue where the menu disappears upon resizing. When my window size is reduced to below 1100px and I open the responsive menu, everything works as expected. However, upon closing ...

javascriptjqueryhtmlcssdom

What is the best way to smoothly transition in an image that is dynamically set using Angular?

I am using Angular to set a background image for my page, but the current loading behavior is not visually appealing as the image loads from top to bottom. I would like to implement a fade-in effect or load the image from a blurry view to enhance the user ...

javascripthtmlcssangularjs

Can a single button trigger a dialogue box or redirect to a different page depending on the object's value?

Is there a way to use a single "create" button that can either open a dialog or go to a new page using ui-router, based on the value of an object? I'm currently using two buttons and ng-if to toggle between them, but I feel like there might be a clea ...

htmlangularjsangular-ui-router

Trigger a JavaScript/jQuery event using code instead of user interaction

Exploring the source code of a website has sparked my curiosity about how to programmatically activate the ajax autocomplete feature on a specific text box. Here is the snippet of relevant code that I have been examining: html: <div class="input-text ...

javascriptjqueryangularjshtml

It is not possible to decrease the size of the image that is currently used as the background image

Three images are arranged in this manner: https://i.stack.imgur.com/u4PdK.png The HTML code for this setup is as follows: <div class="lb-controlContainer"> <div class="lb-closeContainer"> <a class="lb-close"&g ...

css

The incorrect html encoding is being done by CKEditor

I inserted a test link as follows: <a href="https//example.com?test=5&sectid=4"/>testLink When I attempt to edit the link using ckeditor and right-click on it, the URL text box mistakenly converts "&sectid=4" to the section symbol § ...

javascripthtmlhyperlinkckeditor

Inline form malfunctioning and causing issues

Struggling to implement an inline form in Bootstrap using the form-inline class. Despite following the code exactly as specified on the official Bootstrap page, I'm experiencing unexpected behavior. Here's what I'm seeing: https://i.sstati ...

c#cssasp.nettwitter-bootstrap

Exploring the Breakpoints of Bootstrap 4.x Grid System in Development

Understanding the grid system in Bootstrap 4.x can be beneficial, especially when trying to determine the specific grid breakpoint that aligns with the current viewport width. ...

htmlcssbootstrap-4responsive-design

Slide containing Ionic list views

In my Ionic app, I am using ion-slide-box with 3 slides. Each slide contains an ion-list (table view) with varying numbers of items. The issue is that when scrolling through the shorter list items, it shows empty content due to the taller sibling list taki ...

javascriptcsslistscrollionic-framework

When a child SPAN surpasses the height of the parent TD/TABLE, trim it down

I am attempting to make my outer table/td clip the inner SPAN when the content of the span exceeds the height of the outer table, all while maintaining vertical and center alignment. Instead of the current layout: https://i.sstatic.net/s33q7.png I want ...

htmlcss

Ways to adjust the color of a div

I'm currently working on an app using Angular.js and HTML, but I've hit a roadblock. There's a dropdown at the top, and when it changes, I want to adjust the background color of certain cells as shown in this image: https://i.sstatic.net/Ov ...

javascriptjqueryhtmlcssangularjs

How can we have a div stay at the top of the screen when scrolling down, but return to its original position when scrolling back up?

By utilizing this code, a div with position: absolute (top: 46px) on a page will become fixed to the top of the page (top: 0px) once the user scrolls to a certain point (the distance from the div to the top of the page). $(window).scroll(function (e) { ...

javascriptcss

Using Mailto and styling with different formats like bold and italic

Is there a way to open the user's mail client with a formatted text? The text should have elements like bold, italic, or u̲n̲d̲e̲r̲l̲i̲n̲e̲d̲. I attempted to do this using the mailto method. However, it follows the guidelines of RFC 2368, ...

htmlhrefmailto

Issue with AdminLite 2.4.0 data table functionality malfunctioning

Check out this template that I'm using. I've copied all the contents for the bower_components and dist folders, and made sure to link and require everything properly. There are no 404 errors, only status code 200. Here is a snippet of my code: ...

javascriptjquerycsstwitter-bootstrapadminlte

Is there a way to resolve issues with window.open() on Heroku platform?

I've been working on hosting a webpage on Heroku using Node.js. Instead of using the php method, I opted to go with Node and it's been going smoothly so far. However, I've run into a small issue. Here's what my Procfile looks like: web ...

javascripthtmlnode.jsheroku

Is there a way to alter the appearance of an HTML element without an ID using a JavaScript function?

I have a specific goal in mind, but I'm struggling to articulate it concisely. Despite conducting extensive research, none of the suggested solutions seem applicable in my case. Objective: I aim to change the background color of a div based on the da ...

javascripthtmlcssrazor-pages