I'm experiencing issues with printing pages that contain tables, despite having a separate print CSS

Is your page printing with issues when it contains tables? The first page may appear blank, and the content starts printing from the second page if tables are present.

If a table is long, I want to ensure that the table heading prints on each page of the printout as well.

    body{
        font: 8pt/1.5 Arial, "Helvetica Neue", Helvetica, sans-serif;
        background: white;

    }

    #wrap-threeContainer, #wrap-twoContainer, #header {width: auto; 
        padding-top:1em;background:none}

    #wrap-threeCenterColContainer, 
    #wrap-twoRightColContainer {margin:0;padding:0;width:auto;float:none}
    h1 {color:#000}

    #globalWrapper{
        width: auto; 
        margin: 0 2%;
        padding: 0; 
        border: 0;
        float: none !important;
        color: black; 
        background: transparent;
        }

    #dataContainer, #introTextContainer, #wrap-threeContainer h1  {width:100%}

    #top-bar, #primarynavcontainer, #breadcrumbsContainer, 
#footer, #wrap-threeLeftColContainer, #wrap-threeRightColContainer, 
#bannerContainer, p.update, .adobe-reader-download,
 #wrap-twoLeftColContainer {visibility:hidden; display:none}


      tr, td, th {page-break-inside:avoid}
      thead {display:table-header-group}

    a {color:#000000}



    a:link, a:visited {
        color: #520;
        background: transparent;
        font-weight: bold;
        text-decoration: underline;
        }
    #content a:link:after, #content a:visited:after {
       content: " (" attr(href) ") ";
       font-size: 90%;
       }

    div#dataContainer {

        }

    #header #logoContainer {
    position:static;
    }

    #header {border-bottom:1px solid #333}

Answer №1

I managed to resolve this issue independently and thought I would share my solution with other Stack Overflow users as it may be beneficial.

In my screen CSS, I encountered a scenario where overflow:hidden was set for the layout's div. To address this, I strategically replaced all instances with overflow:visible in the print CSS, ultimately resolving the problem.

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 is the best method to update numerous low-resolution image sources with higher resolution images once they have finished loading?

I'm currently developing a website that implements a strategy of loading low-resolution images first, and then swapping them for high-resolution versions once they are fully loaded. By doing this, we aim to speed up the initial loading time by display ...

Certain web browsers may encounter issues when rendering HTML5 content if the doctype declaration is incorrect

After hearing so much about HTML5, I decided to take the plunge and create a website using it yesterday. Surprisingly, everything looked fine on Chrome and my desktop PC, as well as on notebooks and netbooks. However, when I tested it on a Samsung S4 using ...

Achieving consistent image column heights that decrease evenly

I am trying to create a grid-like layout where each column in a row has the same height and contains an image while maintaining its proportions. Currently, I am using the flex-grow property to adjust the ratio of the images. Although this works, it often ...

Hiding CheckBox items within a CheckBoxList control in ASP.NET

Currently, I am working with a CheckBoxList control that is bound to data and can potentially become very large. In order to manage this, I am implementing a filter mechanism. Here is my approach: foreach( ListItem item in this.UserRolesList.Items ) { ...

The act of truncating text on an iPhone

Having issues with textarea and input type text on iOS devices. The bottom of the text is being cut off. Any suggestions on how to make sure the full text is displayed properly? Below is the CSS code: textarea { width: 97%; padding: 5px 1.5%; ...

Rearrange elements by swapping based on their z-index and layer order

Trying to design a unique CSS effect where there is a fixed colored element in the top left corner of a webpage. The background consists of different stages or chunks (red, green, blue) each with a height of 1000px. I want the color of the icon to transiti ...

"Upon refresh, the overflow property of the child element is being applied to the window position

In the React app I'm working on, there's a search results page where users can apply filters. These filter selections update the query params in the URL and trigger a re-mount in React. However, I've encountered an issue across different bro ...

Using HTML and CSS, create a layout with three columns where the side columns are flexible in width and the middle

Currently, I am facing an issue with the header design of my website. The layout consists of 3 columns of divs and my goal is to have a middle column with a fixed width of 980px. In addition, I want the left side of the header to span across the entire bro ...

Failure of ngClass in Angular 7 due to the presence of multiple classes (spaces)

Many frontend frameworks have a practice of encapsulating their CSS styling by adding another class as a prefix. For example, in Bootstrap: btn btn-primary where btn is the prefix. If I were to conditionally apply this using [ngClass] in Angular, it woul ...

Creating a Dynamic Canvas Rendered to Fit Image Dimensions

I'm struggling with a piece of code that creates an SVG and then displays it on a canvas. Here is the Jsbin Link for reference: https://jsbin.com/lehajubihu/1/edit?html,output <!DOCTYPE html> <html> <head> <meta charset=&qu ...

Custom Wheel Color Selector plugin enhancement

I am interested in incorporating this plugin into my website https://github.com/fujaru/jquery-wheelcolorpicker/ When we initialize the plugin with the following code: <input type="text" data-wheelcolorpicker="" data-wcp-layout="block"> The default ...

Troubleshooting: My Custom Checkbox Style Is Not Functioning

I recently customized my checkboxes using CSS, and while they are working fine in Chrome, I encountered issues with Internet Explorer and Edge. In my search for a solution, I came across this helpful reference: ref Here is the CSS code snippet that I used ...

Tips for positioning a dropdown submenu

Check out this JSFiddle demo I created for a small dropdown menu¹. The one thing I'm struggling with is aligning the dropdown sub menu box properly. <ul id="nav"> <li> <a href="#" class="main-menu">vcds ...

How can one access a div tag within a script using Jquery?

I am faced with a challenge related to accessing the div tag "warningMessage" within my HTML code. Below is the snippet that contains this div tag under scripts: <script id="notePopup" type="text/x-kendo-template"> <p class="notePopupMessage" ...

Generate several div containers that occupy the entire screen

I'm struggling to design a one-page website with full-screen divs, but I can't seem to make them truly full screen. This is my first time using Bootstrap for responsiveness, and I want the background video to remain fixed while the divs take up t ...

What is the process of dynamically loading CSS into an HTML document?

In my C# program, I am utilizing a web browser control and setting its HTML property programmatically by loading it from an HTML string variable. While this setup works almost perfectly, I have noticed that it loses the reference to the CSS file. I believe ...

What is the process for inserting a custom image onto a button that redirects to a different website using HTML and CSS?

Looking to make a button that directs to a different website with a custom image. Would it be better to use the <input> tag or the <button> tag? Appreciate any insight! ...

Ways to customize the appearance of a unique component

I'm faced with a challenge where I need to make edits to a component that is not editable: import * as React from 'react' import styled from '@emotion/styled' import FlexRow from '../../layouts/FlexRow' const RowContaine ...

Is there a way to compile LESS files that include @import statements for other LESS files?

I am currently in the process of converting Twitter Bootstrap's LESS files into the necessary CSS files for Bootstrap to function. I have attempted to use LESS and SimpLESS, but encountered errors with both. According to a discussion on Stack Overflow ...

Looking to align three divs side by side in the center

My goal is to have three buttons aligned side by side, but I want them center-aligned instead of floated to the left. I have already set the display to inline-block and vertical align to top. div.rotateBtn input { background-image: url(""); margin-l ...