Firefox is able to print multiple pages with a rowspan feature

I am facing an issue with a table that contains a large amount of data and uses related cells via row span. When I try to print using the Mozilla/ Firefox engine, the print preview shows almost 100 pages with just a single line on each page.

I attempted to use some CSS properties like table, tr, td, td span level page-break-inside: avoid but it didn't seem to solve the problem.

In the past, we used divs instead of rowspan which worked fine, but there were slight alignment issues horizontally by 1 or 2 pixels.

Since this engine is also used for the PDF generator, you can easily replicate the issue by opening the table in Firefox.

<!DOCTYPE html>
<html>
...
    </div>
htmlcssfirefox

Answer №1

Eureka! I had a sudden realization that by changing the span.PDFComment to utilize 'display:block' instead of 'inline-block'

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

Issues with margin and padding-top not functioning properly when using @media for printing

Is there a way to add some space between the top of my webpage and my logo? I've tried adjusting the padding in my CSS, but when I check the print preview in Chrome, no spacing is visible. Below is my HTML code: <div class="container"> < ...

htmlcssmarginpaddingspacing

What is the process for creating distinct templates for various devices such as mobile phones, desktops, and tablets using Angular?

I am working on an Angular 9 application. Currently, I have some mockups but the template appears differently on mobile compared to desktop. However, the data fetched from API calls is mostly similar for both platforms, with slight variations possible be ...

htmlangularbootstrap-4progressive-web-appsngx-bootstrap

Improving my 'Adaptive' layout

Check out my website at kylesethgray.com. I've created a 'somewhat responsive design', but there are two issues that need fixing: Whenever I have a list, whether it's an <ul> or <ol>, the bullets get cut off when the bro ...

htmlcsstumblr

Do CSS have a conflict resolution rule? While my fadein keyframes function perfectly, I encounter issues with my slidedown animation

Using react and css, I have created two animations in my css file: @keyframes fadein { 0% { visibility: hidden; opacity: 0; } 50% { opacity: 0.5; } 100% { visibility: visible; opacity: 1; } } ...

cssreactjscss-animations

Ways to include text beneath an image within a column using Bootstrap HTML code

Currently I am working on creating a box using Bootstrap, see the code below: <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <style> .addonscard { width: 100%; ...

htmlcssbootstrap-4

AngularJS: intercepting custom 404 errors - handling responses containing URLs

Within my application, I have implemented an interceptor to handle any HTTP response errors. Here is a snippet of how it looks: var response = function(response) { if(response.config.url.indexOf('?page=') > -1) { skipException = true; ...

javascripthtmlangularjs

How can I apply a blurred effect to the background image of a jumbotron in Bootstrap-vue without affecting the clarity of the text overlay

I need help figuring out how to blur the background image of my jumbotron without blurring the text on top. <b-container fluid class="text-center"> <div> <b-jumbotron class="jumbotron"> <p style=& ...

cssvue.jsbootstrap-4bootstrap-vue

The navigation bar refuses to budge towards the right side

I am having an issue with my navbar alignment. I have set the div as shown, but the navbar is still staying on the left side instead of moving to the right. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" h ...

htmlcssbootstrap-4

Loading indicator for buttons

Issue with submit button onclick function (onClick="mandatoryNotes()"). It is taking a while to load, so a preloader script was added. The preloader is now working, but the function is not being called. Seeking assistance. Thank you. function mandatoryN ...

javascripthtml

Create a canvas circle and apply a gradient fill

After reviewing the source code below: HTML: <canvas id="main" width="500" height="500" style="border:1px solid black;"></canvas> JavaScript: function myRnd(val) { return parseInt(Math.random() * val); } function rndCircles() { var ...

htmlcanvas

Copy and move icons by dragging and dropping them in unison

I have two bordered spaces for tools and a free space (droppable area). The tool space includes some shapes that can be dragged and dropped into the free space. One issue I would like to address is regarding cloning. How can I add a clone of icons back in ...

javascripthtmljquerycssjquery-ui

Styling a list using multiple columns with CSS

My goal is to design a columned list using only HTML and CSS. I have experimented with floats and inline-block, but it seems like inline-block is the best option for me due to these specific requirements: The layout must be in columns; The number of colu ...

htmlcss

Eliminate any unnecessary tags located before the text

I am facing a challenge with the following code snippet. The Variable contains a string that includes HTML tags such as <img>, <a>, or <br>. My goal is to eliminate the <img> tag, <a> tag, or <br> tag if they appear befo ...

javascriptjqueryhtml

Instruct RMarkdown to exclude any videos from the content

Using RMarkdown to create html documents is advantageous, especially for including figures generated in R and video links. Here's an example of how videos can be added directly through HTML: <video controls width="1000" height="600" poster="linkt ...

htmlrmarkdownr-markdown

Loading web pages using Jquery data-role="page"

Currently, I am in the process of developing a web application that utilizes Jquery and consists of multiple pages within a single html document. This is achieved by using a series of data-role="page" elements enclosed within <div> tags. At the mome ...

jqueryhtmlpageload

Selenium in C# struggles with implementing AcceptInsecureCerts when using the Firefox driver (Latest Releases as of 2018/02/08)

Hey there! (first time sharing on this platform), I'm struggling to find a way for geckodriver to bypass those pesky certificate errors. I've spent hours researching and ensuring that everything is up-to-date. It's frustrating because many ...

c#seleniumfirefoxgeckodriver

What is the best way to horizontally scroll and maintain the center alignment of a fixed-width div, especially when it exceeds the width of the browser window?

My current setup is almost perfect, but I am struggling to keep the green rectangle centered on the browser between 835px and 320px width. Any solutions using CSS or JavaScript are welcome. This is my first time posting a question on stackoverflow, so I h ...

javascripthtmlcss

The event listener is failing to trigger the JavaScript function upon click

I am experiencing an issue with an onClick listener triggering an AJAX call to a PHP script. It seems that the click is not being recognized. Any suggestions on what could be causing this? Index.html <html> <head> <script src="//ajax.googl ...

phphtmlajax

Can one slider operate independently, causing the other sliders to become unresponsive?

I am currently working on developing a website for my restaurant. Initially, I had successfully integrated 2 image sliders as seen on However, when I decided to add a nivo slider and include <script src="http://ajax.googleapis.com/ajax/libs/jquery/1 ...

jqueryhtmlwebsliderconflict

flash animation on an HTML webpage (fancy pop-up)

Hey, I'm interested in creating a similar effect to this: Check out this example >> Simply click on "Start PicLens Lite Slideshow PicLens". Did you notice how the swf/flash loads on top of the regular page? I want to achieve that :-D If there ...

htmlflashpopuploader