Utilizing CSS to print specific columns on a separate page at regular intervals

I am facing a challenge with printing a very large HTML table, which is dynamic in the sense that the number of rows and columns can vary. When printing, the rows that exceed the page length are automatically continued on the next page. However, I also need any overflowing columns to be printed on a separate page.

After conducting extensive research, I have been unable to find a straightforward solution to achieve this without resorting to trial and error methods. Currently, my approach involves printing a set number of columns per page.

Is it possible to use CSS properties like page-break-after or page-break-before to address this issue? If so, how can it be implemented?

htmlcssprinting

Answer №1

Controlling page breaks with CSS is not possible.

The specifications outline where page breaks are allowed to occur:

  1. In the vertical margin between block-level boxes. [...] // for example, between table rows
  2. Between line boxes inside a block container box.
  3. Between the content edge of a block container box and the outer edges of its child content[...]

http://www.w3.org/TR/CSS2/page.html#allowed-page-breaks

Table columns are not included in this rule. Therefore, an excessively wide table row must stay on one page, potentially exceeding its width. The specs also mention different ways to handle this scenario:

When formatting content in the page model, some elements may go beyond the current page box. [...] The specific formatting of these elements is not specified in this specification. [...] Browsers have the freedom to handle elements positioned outside the page box in various ways, such as discarding them or creating new page boxes at the end of the document.

http://www.w3.org/TR/CSS2/page.html#outside-page-box

In simple terms, browsers can make their own decisions on how to handle this situation.

This remains true even in the forthcoming CSS3 specifications

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

Tips for handling an incorrect date entry when a field loses focus in AngularJS

If I have an <input> field with the type='date' attribute in its untouched state, it displays mm/dd/yyyy as the date format. I am looking to see if there is a way to utilize AngularJS ng-blur directive to reset the field to this original fo ...

javascriptangularjshtmldate

I plan to compile a collection of names in a text field and then have the ability to select and access each name individually with just a click

I am currently working on a project that involves creating an admin site using Firebase. One of the main features of the site is large text fields that display information which can be modified. For instance, the user management page includes text fields ...

javascripthtmlcssfirebasetextfield

What is the best way to ensure that an iframe adjusts its height to fit the content within a tabbed container?

Is there a way to dynamically set the height of an iframe to match the content inside it when clicking on a tabbed plane? Initially, I used a fixed height of 1000px. How can this be achieved? <div class="container-fluid text-center"> <div ...

javascriptjqueryhtmlcssweb

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 ...

cssjavafxcomboboxstyling

Transmit information using $broadcast when a button is clicked, and retrieve that information using $scope.$on

I am trying to create a function that will broadcast data from the server upon button click, and then navigate to a new route using $state.go('new-route'). In the controller of this new state, I want to retrieve the transmitted data. However, whe ...

javascripthtmlangularjseventsangular-ui-router

Confirming the accuracy of multiple fields in a form

Looking for help with validating both password and email fields on a registration form. I've successfully implemented validation for passwords, but need assistance adding validation for the email section as well. Can both be validated on the same form ...

javascripthtml

What is the best way to scale down my entire webpage to 65%?

Everything looks great on my 1920x1080 monitor, but when I switch to a 1024x768 monitor, the content on my webpage becomes too large. I've been manually resizing with CTRL+Scroll to reduce it to 65%, which works fine. Is there a code solution using CS ...

javascripthtmlcssjoomla

Disable the full screen camera mode on iOS browsers while live streaming camera video

I recently completed a tutorial on capturing video streams from the front or rear camera of an iPhone using JavaScript. The tutorial can be found at this link. While testing the functionality on my desktop browser, everything worked perfectly. However, wh ...

javascripthtmliosmediadevices

Encircling the icon with a circle

My styling skills are limited, but I'm attempting to create a marker that resembles the image linked below: https://i.stack.imgur.com/wXkaq.png. So far, I've made some changes in the code snippet provided, but I'm struggling to get it to d ...

htmlcss

Oops! Looks like we have encountered an issue with reading the property 'checked' of nothing

Whenever I click the checkbox, an image should be displayed. Unfortunately, I encountered an error: Uncaught TypeError: Cannot read property 'checked' of null at (index):185 at dispatch (VM576 jquery.min.js:3) at i (VM5 ...

javascriptjqueryhtmlcssangular

HTML5 audio recording

I have been exploring different methods to record audio using HTML5, but so far I have not found a solution. I attempted to utilize this particular example without success. It seems that the statement about lack of support from any browser may be true. ...

htmlaudio-recording

Display or conceal a div based on the size of the screen using HTML and CSS

Hey there, I recently finished my first React Project and I’m wondering if there’s a way to hide the 'side-menu' section on mobile screens using CSS. Any suggestions? <div className='side-menu'> <SiderComponent /> < ...

javascripthtmlcssreactjs

Issue with Img Srcset Attribute Ignoring Smaller Images

The <img> element's srcset attribute seems to always select the larger <img> source, even when the size media query is false. I found success in using a <picture> element to ensure image selection based on browser width. Based on th ...

htmlsrcset

How can we use Python and Selenium to retrieve the text from HTML that includes the <p> tag?

I have a simple question that I hope you can help me with. I'm not feeling well and struggling to complete my presentation because my brain just isn't functioning properly. Here is the HTML code in question: <p> <b>Postal code:& ...

pythonhtmlpython-3.xselenium

The performance of Jquery Animate is acting strangely after the upgrade to version 1.11

Take a look at http://jsfiddle.net/integerz/k19x8L1b/2/ which uses version 1.7.x $(function () { $("#clickme").toggle(function () { $(this).parent().animate({right:'0px'}); }, function () { $(this).parent().animate({righ ...

javascriptjqueryhtml

Code that achieves the same functionality but does not rely on the

I utilized a tutorial to obtain the ajax code below. The tutorial referenced the library jquery.form.js. Here is the code snippet provided: function onsuccess(response,status){ $("#onsuccessmsg").html(response); alert(response); } $("# ...

javascriptjqueryhtmlajaxforms

Easily validate the contenteditable attribute of <td> element

I am currently working on a table that displays data from a MYSQL database. Whenever a user makes changes to an element in the table, I want the database to be updated using AJAX. Below is my JavaScript code for sending data in an editable row. function s ...

javascriptjqueryhtmlmysqlajax

Creating CSS rounded corners with pseudo-elements

Take a look at this fiddle: https://jsfiddle.net/xnr7tqm1/ This is the html code I'm working with: <div class="media-container"> <iframe width="365" height="200" src="https://www.youtube.com/embed/JqjIb6FhU_k" frameborder="0" al ...

htmlcss

Scrolling to the active list item in the navigation bar

Having an unordered list with the id mainul in the navigation bar is causing a problem when the page reloads. The navigation bar always starts at the beginning, but I would like it to automatically scroll to the active li element. This is my HTML code: & ...

javascriptjqueryhtml

Updating Template in Python Flask upon Button ClickLet's enhance our Python Flask application by

I need assistance with switching templates upon clicking a button. My Python code is as follows: @app.route("/", methods = ['POST', 'GET']) def my_forum_post(): if request.method == 'POST': if reque ...

pythonhtmlflask