I have a page division with scroll bars and I want to ensure that the entire content of the division is displayed

I am facing an issue with a div and table on my webpage:

<div id="tablediv">
    <table id="table">
         <tr><th>headers</th></tr>
         <tr><td>contents</td></tr>
    </table>
<div>

Along with the following CSS:

#tablediv {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 50px);
}

The problem I am encountering is that even though the div appropriately scrolls to show the entire height of the table, when in print view mode, it only shows what fits on one page and does not continue to other pages for the remaining rows of the div/table.

I am looking for a solution using @media print CSS to address this issue. How can this be achieved?

htmlcssbrowserprintingmedia-queries

Answer №1

Ensure to update the height within a media query. Place the query after the initial declaration for proper overwrite.

#tablediv {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 50px);
}

@media print { 
    #tablediv {
        max-height: auto;
        height: auto;
        overflow: visible;
    }
}

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

Creating dynamic text bubble to accommodate wrapped text in React using Material-UI (MUI)

I am currently developing a chat application using ReactJS/MUI, and I have encountered an issue with the sizing of the text bubbles. The bubble itself is implemented as a Typography component: <Typography variant="body1" sx={bubbleStyle}> ...

htmlcssreactjstypescriptmaterial-ui

Calculating dimensions for parents and their children

Could someone please explain to me why the size of #child is different from that of #parent? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or ...

htmlbordermargincss

Guidelines on centering an AJAX spinning animation within a parent div

Below is the basic structure of an HTML document for a webpage. <div class="grand-parent"> <div class="header">Heading</div> <div class="parent-div"> <div class="child-div-1"></div> ...

javascriptjqueryhtmlcssajax

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

Currently using Google Chrome version 29.0.1547.62 m. I've employed the CSS attribute overflow set to hidden on the parent element, which renders some of my DIV elements hidden from view. Additionally, these concealed DIV elements are adjusted in pos ...

javascripthtmlcssgoogle-chrome

The wget tool is capable of downloading CSS files that contain @import rules, however it overlooks

Currently utilizing the following command with wget: wget --page-requisites --convert-links -e robots=off \ --span-hosts --restrict-file-names=windows \ --directory-prefix=$ASSETS_DIR --no-directories http://myhost/home The HTML page ...

csswget

Browser does not support the Media Query

I'm completely puzzled by Media Queries. I've been attempting to resolve this issue but cannot seem to identify where the problem lies. While creating a website with Wordpress, my header.php contains the following line: <meta name="viewpo ...

cssmedia-queriesviewport

Content width exceeds body width

Having an issue with body width that seems strange. Check out this fiddle link to see for yourself. <div class="topbar" style="width:100%; background:#000; color:#fff"> <div class="container" style="width:970px; margin:0 auto;">Lorem ipsum ...

css

Why won't my Java servlet code execute?

included the directory structure To facilitate adding two numbers and displaying the result upon clicking a submit button, I developed a straightforward Java servlet. This servlet retrieves the necessary information when called. The development environmen ...

javascriptjavajqueryhtmlajax

ajax and codeigniter combination for selecting options

Is it possible to implement a set_select option within an AJAX component for a dynamic dependent dropdown list that is being cleared after validation errors? I am looking to incorporate the set_select functionality in the code snippet below: <script ty ...

phpajaxhtmlcodeigniter

Adding LocalStorage functionality to buttons in order to switch colors can be done by storing the

I've run into an issue trying to incorporate LocalStorage with the buttons that change colors as themes in JavaScript. I'm new to coding and eager to add this feature to my personal blog. $(document).ready(function () { $(".header--theme-button ...

javascripthtmlcsslocal-storage

The button styled with CSS is failing to display the background image in Internet Explorer 6

I am working on updating a legacy web application that is specifically targeted for IE 6. Currently, I am re-skinning the interface and replacing the default browser button look with a blue button image. While my HTML and CSS code works perfectly in IE 8, ...

htmlcssbuttoninternet-explorer-6background-image

What is the correct way to properly wrap the div component in this code snippet?

I am currently working on implementing a Javascript component that displays pinned locations and related information on a map. I have made some progress with the implementation, but unfortunately, it does not appear correctly in the actual site. There is a ...

javascripthtmljquerycssimplementation

Guide on using an image as a background in a <svg> element with React.js

I am facing an issue with filling an SVG path with a background image. I have tried various methods found on Google, but none seem to work as expected. Here is the code snippet I have been working with: <div className="intro"> ...

htmlcssreactjssvg

Continuous refreshing of window during Ajax and PHP form submission

Appreciation to those who took the time to read this post! I have a contact form on my website and I am facing an issue where the window keeps refreshing after submission, despite using Ajax with a POST method. Below is the HTML code: <form class="fo ...

phpjqueryhtmlajax

Push the accordion tab upwards towards the top of the browser

I am working on an accordion menu that contains lengthy content. To improve user experience, I want to implement a slide effect when the accordion content is opened. Currently, when the first two menu items are opened, the content of the last item is disp ...

javascriptjquerycssaccordion

How can I extract data from a swiffy animation?

Suppose I am tracking the number of mouse clicks in Flash. To do this, I have utilized the following code: import flash.events.MouseEvent; plus.addEventListener(MouseEvent.CLICK,aaa) var i:int=0; function aaa(e:MouseEvent) { i++; var a:Number ...

javascripthtmlactionscript-3google-swiffy

Using the div tag will result in a new line being created

Whenever I try to create an element with a div, I notice there is always some space between the content and the border (blue line). On the other hand, using span causes the content to break, appearing outside the borders. Here is my CSS code: #m ...

htmlcss

What is the best way to ensure that all rows in flexbox have the same number and dimensions as the first row?

My objective with flexbox was to evenly distribute the text across the width of the page. When I say 'evenly distributed', I mean: If there are 3 sections, the center of the text in each section should be at fifths of the webpage width. This is ...

htmlcssflexbox

Determine the differences in the content of the body section of an HTML file using

I am in the process of creating a shell script that can track changes on a website and send me an email with the content of the change if any. To achieve this, I am using wget to download a copy of the HTML and then comparing it to the version saved from t ...

htmlshelldiff

Error in content policy for CSS in Stripe Checkout

I am currently attempting to integrate Stripe Checkout into my Ionic App. I have created a Directive that injects the form into my content view, however, upon execution, the CSS fails due to a content policy violation: checkout.js:2Refused to load the s ...

javascriptcssionic-frameworkstripe-payments