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

Is PHP loaded prior to the `html body`?

I'm facing a unique challenge where I am currently transferring variables from a PHP page to hidden HTML inputs. The values are extracted from these hidden inputs using a JavaScript function that is called in the following manner: <body onload=" ...

phpjavascripthtml

Is it better to apply the font-family to the body or to the html element?

Is it more appropriate to specify the font-family CSS property on the html element or the body element? html { font-family: sans-serif; } or body { font-family: sans-serif; } I've looked into this issue online, but there doesn't seem to ...

htmlcss

Place the blockquote in the middle, but maintain the text's alignment to

I recently designed a webpage using Bootstrap and CSS. My main goal is to have my two blockquotes centered on the page while keeping the text left-aligned (which is the default behavior for the selected classes in Bootstrap). To see the full code, take a ...

htmlcssbootstrap-4

"Is it possible to conditionally render a component depending on the state in

One of the challenges I'm facing is customizing a filter icon from MaterialUI. My goal is to change its color to black when a checkmark is checked, and adjust its position accordingly. Additionally, when a box is checked, it should fill in setFilters. ...

javascriptcssreactjsmaterial-uijsx

Shift the image down to the bottom of the sidebar

This is the code for my sidebar HTML, with the side navigation bar positioned on the left: #main-container { display: table; width: 100%; height: 100%; } #sidebar { display: table-cell; width: ...

htmlcss

Having Trouble with the Dropdown Submenu in Bootstrap

Could someone assist me in getting this dropdown menu to function properly? I am trying to make it so that when the "Program" menu is clicked, a dropdown submenu will appear. I have inserted some code for it, but unfortunately it's not working. Just t ...

htmltwitter-bootstrapcssbootstrap-4

What is the best method for implementing numeric input in Vue.js?

I have experience developing web apps using Nuxt.js. I am currently trying to implement validation that excludes negative values and decimal points in all input tags (around 20-30) within the same Vue component. My approach involves injecting validation ru ...

javascripthtmlvue.jsnuxt.js

An error was encountered involving an unexpected token < at the beginning of a JSON file while using express with firebase

After setting up an authentication system in express using firebase auth, I established an endpoint in my express server: app.post('/users/login', (req, res) => { console.log('logging in...'); firebase.auth().signInWithEmail ...

javascripthtmlfirebaseexpress

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

javascripthtmldojo

Tips on aligning vertically centered left and right floating objects without having to use the line height property

          Here is the issue I am facing http://jsfiddle.net/vT4YT/ <table><tr><td><div></div><div></div></td></tr></table> You can see that the options and row text are not vertic ...

htmlcsscss-floatvertical-alignment

How can I modify the value of a CSS animation rule in AngularJS?

I am looking to dynamically change the value assigned to stroke-dashoffset based on a custom input. @-webkit-keyframes donut-chart-1 { to { stroke-dashoffset: 100; } } @keyframes donut-chart-1 { to { stroke-d ...

javascriptangularjscsscss-animations

Transformation of CSS into SASS (or LESS)

Looking for recommendations on CSS to less or CSS to sass conversion tools. I've come across a couple like and , but unsure of their reliability. Any insights or recommendations on other tools would be highly appreciated. I have a sizable CSS code ba ...

csssassless

Is there a way to bypass cells within an html table?

Creating an online board game and looking to have the cells go around the board. Wondering if anyone knows a way to skip the cells in the middle? Attempted using   but it doesn't seem to be effective. Here is a snippet of the code: #board { ...

htmlcsshtml-table

When developing a website in Sitecore 8, the link consistently opens in a new window rather than a new tab, even after including the target="_blank" attribute

When using Sitecore-8 CMS, external links are set to open in a new window instead of a new tab in Internet Explorer 10 and IE 9, even when target="_blank" is included in the href tag. We are seeking a solution to address this issue. Any assistance would b ...

html

What is the best way to connect multiple web pages together?

Hello everyone, I could really use some assistance with a problem I'm facing. As a newcomer to web development, I have a question about navigation bars. I've successfully created a basic webpage with a navigation bar, but now I'm unsure how ...

javascriptphpjqueryhtmlcss

Angular paginator encountered an issue while attempting to parse the template

I'm updating my data list to include pagination, and everything seems fine with retrieving data and sorting. However, when I add the paginator tag to my template, Angular shows me an error: ERROR in Errors parsing template: Unexpected closing tag " ...

htmlangularpagination

Ways to toggle the sliding of text on and off an image?

After spending some time experimenting with my code, I managed to get it working. Essentially, when a user hovers over an image, text now appears over the image. Since this is a gallery, I had to utilize $(this).children in order to target and display the ...

javascriptjqueryhtmlcss

What could be causing this addEventListener to fail when I am assigning elements to a class?

I've encountered an issue with my code where I have two text inputs and two date inputs. I tried to select all of them using QuerySelectorAll with a class, added a click listener that should change the textContent of a div element to "", but it's ...

javascripthtmlcssfunction

Is it possible to incorporate Excel files into a web-based system that only supports HTML?

Currently, I am working on an HTML-based system where my supervisor has specified that only HTML can be used to keep things easy and simple. My question is: Can Excel files be added to the HTML-based system, and if so, is it possible to work with, save, a ...

html

Unable to execute a JavaScript function when triggered from an HTML form

This is the code for a text conversion tool in HTML: <html> <head> <title> Text Conversion Tool </title> <script type="text/javascript"> function testResults(form) { var str = form.stringn.value; var strArray = str.split(" ...

javascripthtmlformsfunction