Mastering the art of manipulating Div elements using CSS for the optimal Print View experience

I have a table with several columns and 1000 rows. When I print the page, it breaks the rows onto different pages, showing the remaining rows on subsequent pages. I want to display the complete record in one go.

Below is a sample code with only one row inserted. However, when we have 1000 rows, it creates issues:

<!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.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@media screen
{
.divTable
{
    border:1px solid;
    display:  table;
    width:98%;
    border-spacing:0px;/*cellspacing:poor IE support for this*/
}
.divRow
{
   display:table-row;
   width:auto;
}
.divCell
{
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
    float:left;/*fix for buggy browsers*/
    display:table-column;
}
}
@media print
{
  @page
  {
   size: 8.5in 11.5in;
   size: potraite;
  }
  .divTable
  {
    page-break-after:auto;  
    border:1px solid;
    display:  table;
    width:99%;
    border-spacing:0px;/*cellspacing:poor IE support for this*/
  }
  .divRow
  {
    display:table-row;
    width:auto;
  }
  .divCell
  {
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
    float:left;
    display:table-column;
  }
}
</style>
</head>

<body style="margin:0 0 0 0">
<div class="divTable">
 <div class="headRow">
  <div class="divCell" style="width:10%">
    SNo
  </div>
  <div class="divCell" style="width:10%">
    RNo
  </div>
  <div class="divCell" style="width:10%">
    Full Name
  </div>
  <div class="divCell" style="width:10%">
    Father Name
  </div>
  <div class="divCell" style="width:20%">
    Address
  </div>
  <div class="divCell" style="width:10%">
    Class
  </div>
  <div class="divCell" style="width:10%">
    Section
  </div>
  <div class="divCell" style="width:10%">
    Teacher Name
  </div>
  <div class="divCell" style="width:10%">
   Attendence%
  </div>
 </div>
</div>

<div class="divTable">
 <div class="headRow">
  <div class="divCell" style="width:10%">
   1
  </div>
  <div class="divCell" style="width:10%">
    RNo2013-0001
  </div>
  <div class="divCell" style="width:10%">
    Abc
  </div>
  <div class="divCell" style="width:10%">
    Xyz
  </div>
  <div class="divCell" style="width:20%">
    Address
  </div>
  <div class="divCell" style="width:10%">
    Class
  </div>
  <div class="divCell" style="width:10%">
    Section
  </div>
  <div class="divCell" style="width:10%">
    Teacher Name
  </div>
  <div class="divCell" style="width:10%">
   90%
  </div>
 </div>
</div>

</body>
</html>

Please provide me with a CSS-based solution to manage this issue. I need to address it solely with CSS.

Answer №1

It's pretty straightforward to understand that there is a limited amount of space on any given page.
If you want to conceal unused cells, consider using this CSS property:
empty-cells:hide;

  .divTable
  {
    page-break-after:auto;  
    border:1px solid;
    display: table;
    width:99%;
    border-spacing:0px;/*cellspacing:poor IE support for this*/
    empty-cells:hide;
  }

Additionally, have you considered why you're utilizing divs instead of the standard HTML 5 table layout?

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

Ensuring the Angular Material bottom sheet (popover) stays attached to the button

Recently, I've been working on an Angular project where I successfully integrated a bottom sheet from Angular Material. However, I encountered an issue when trying to make the opened popup sticky to the bottom and responsive to its position, but unfor ...

css media queries not taking precedence over default styles

Struggling to find a solution as no similar case was discovered!! To avoid adding a class name for each page, I am eager to utilize a generic class name as shown below: <div id="news"> <div class="news column">content 1</div> &l ...

Can ngFor be utilized within select elements in Angular?

I'm facing an interesting challenge where I need to display multiple select tags with multiple options each, resulting in a data structure that consists of an array of arrays of objects. <div class="form-group row" *ngIf="myData"> <selec ...

Determine the time variance in hours and minutes by utilizing the keyup event in either javascript or jquery

There are 6 input fields, with 5 input boxes designated for time and the result expected to display in the 6th input box. See the HTML below: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input ty ...

The Masonry Grid is leaving empty spaces unfilled

I've been experimenting with Sveltekit and SCSS to create a Masonry grid. However, I'm facing an issue where the items in my grid are not filling in the empty space as expected. Instead, they seem to be following the size of the largest image, le ...

Is there a way to implement CSS transitions when hiding elements?

My bootstrap navbar collapses and displays items outside of it. However, when I hide the menu, the overlay div disappears immediately and does not transition smoothly with the menu. How can I apply a transition to the div when hiding the menu? I've t ...

Struggle with bringing the foreground image to the forefront not successful

Looking to create a web page with a full-page image overlap? I've been struggling with my current code as the image is not displaying properly. If anyone has any tips or advice, it would be greatly appreciated! HTML Code <html> <head> ...

Turn off the custom CSS section in the WordPress Customizer for WordPress themes

Looking for assistance in locking or disabling the Appearance -> Customizer -> Additional CSS area on Wp-admin. https://i.sstatic.net/FXXSE.png I have referred to this codex: https://codex.wordpress.org/Theme_Customization_API. However, I couldn&ap ...

Representation of a family tree in CSS showcasing multiple sub-parents (both many to one and one to many relationships)

I've come across various family tree presentations. I'm curious if it's possible to display a one-to-many and then many-to-one structure? Currently, the flow is linear stop after stop, but I'd like to incorporate multiple steps that con ...

What is the best way to set the background opacity to 0.7 without impacting the content within it?

Currently, I'm facing an issue with two divs - the outer one is identified as "BD" and the inner one as "content". Whenever I attempt to reduce the opacity of BD's background-color, the content inside also becomes less opaque including both image ...

ngmodelchange activates when a mat-option is chosen in Angular Material

When a user initiates a search, an HTTP service is called to retrieve and display the response in a dropdown. The code below works well with this process. However, clicking on any option in the dropdown triggers the 'ngmodelchange' method to call ...

Utilizing Vue JS to set an active state in conjunction with a for loop

Currently in Vue, I have a collection of strings that I am displaying using the v-for directive within a "list-group" component from Bootstrap. My goal is to apply an "active" state when an item is clicked, but I am struggling to identify a specific item w ...

Ways to incorporate services into functions within Angularjs

I'm struggling to grasp the concept of dependency injection in AngularJS. Currently, I am attempting to inject $interpolate and $eval into my controller. However, after consulting the documentation, I realized that my lack of foundational knowledge i ...

Effortlessly move and place items across different browser windows or tabs

Created a code snippet for enabling drag and drop functionality of elements within the same window, which is working smoothly. var currentDragElement = null; var draggableElements = document.querySelectorAll('[draggable="true"]'); [].forEach ...

Is there a way to modify the Javascript for this Contact Form to trigger a different action if a specific key is pressed instead?

I have been working on a Contact Form that integrates Google Scripts. Everything seems to be functioning well as it successfully sends emails and formats them properly in my inbox. However, there are two issues that I am encountering: -I want to exclude t ...

How can an HTML5 application be configured to enable access to intranet and local files?

It's a known fact that accessing the local path of a file added using a file input field or drag-and-drop is not possible even with the new FileAPI. Whether this limitation is good, bad, or ugly is not up for debate. The FileAPI specs clearly state th ...

Rails encounters problems when assets are modified

I recently inherited a small Rails website. When I attempted to make a change to a css file, I encountered an error page (code 500) in Rails with the following message: No such file or directory - /.../cache/assets/sprockets%2F1450c8f5d2b6e201d72fa175586b ...

Resolve the issue of text overflow in PrimeNG Turbo Table cells

When utilizing Primeng table and enabling the scrollable feature, the table is expected to display a scrollbar while ensuring that the text within the cells does not overflow. Unfortunately, this expected behavior is not occurring. To see an example of th ...

Ways to eliminate unused classes from JQuery UI

We have successfully implemented JQuery UI library for enhancing our interface. However, since we no longer need to support outdated browsers like IE6, classes such as .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl are unnecessary and clu ...

Clearing Up CSS Height Definitions

Based on my observations from other posts, it seems that to establish the height of an element in percentages or pixels, etc., the parent element's height also needs to be explicitly defined. This implies that the height settings must be specified all ...