Ensure the table row remains on one page when printing or viewing the print preview

Question

Ensure the table row remains on one page when printing or viewing the print preview

I'm currently dealing with an html report that contains a table, which can be seen here

http://jsfiddle.net/fhwoo3rg/2/embedded/result/

The issue arises when trying to print the report, as it breaks in the middle of a table row like this:

https://i.sstatic.net/XPWQC.png

I've attempted to address this problem by using the following code snippet:

@media print    
{
  tr
  {
    position:relative;
    page-break-inside:avoid;
    page-break-after:auto;
  }
}

Unfortunately, this solution hasn't worked so far. Can anyone provide guidance on how to prevent the page break from occurring in the middle of a row specifically during printing?

For reference, I am working with Chrome version 46.

html css html-table

Answer 1

Answer №1

Based on the user interface, it would be more effective to opt for an unordered list instead of a table in this scenario and float the list items.

Furthermore, consider un-floating the list items for printing purposes to revert the layout back to a standard top-to-bottom format and eliminate any unnecessary styling for print.

For testing purposes, try printing the following page: http://example.com/print-test

If you need a reference for the code, check out this snippet below:

@media screen {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: block;
    width: 200px;
    height: 150px;
    border: 1px solid #000;
    padding: 5px 10px;
    float: left;
    position: relative;
    margin: 5px;
  }
}

.myGroup {
  border: 1px solid grey;
  width: 90%;
  padding: 1px;
  text-align: center;
  position: absolute;
  bottom: 10px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#999));
  background-image: -webkit-linear-gradient(top, #fff, #999);
  background-image: -moz-linear-gradient(top, #fff, #999);
  background-image: -o-linear-gradient(top, #fff, #999);
  background-image: linear-gradient(to bottom, #fff, #999);
}

@media print {
  ul {
    list-style: normal;
  }
  li {
    float: none !important;
    border: none;
  }
  .myGroup {
    border: none;
    position: relative !important;
    bottom: 0;
    display: inline;
    width: auto;
  }
}

<ul>
   <li>
      <p><strong>Test text</strong></p>
      <p>Test description</p>
      <div class="myGroup">Test Group</div>
   </li>
   <li>
      <p><strong>Test text</strong></p>
      <p>Test description</p>
      <div class="myGroup">Test Group</div>
   </li>
   <li>
      <p><strong>Test text</strong></p>
      <p>Test description</p>
      <div class="myGroup">Test Group</div>
   </li>
   ...
</ul>

Answer 2

Based on the user interface, it would be more effective to opt for an unordered list instead of a table in this scenario and float the list items.

Furthermore, consider un-floating the list items for printing purposes to revert the layout back to a standard top-to-bottom format and eliminate any unnecessary styling for print.

For testing purposes, try printing the following page: http://example.com/print-test

If you need a reference for the code, check out this snippet below:

@media screen {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: block;
    width: 200px;
    height: 150px;
    border: 1px solid #000;
    padding: 5px 10px;
    float: left;
    position: relative;
    margin: 5px;
  }
}

.myGroup {
  border: 1px solid grey;
  width: 90%;
  padding: 1px;
  text-align: center;
  position: absolute;
  bottom: 10px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#999));
  background-image: -webkit-linear-gradient(top, #fff, #999);
  background-image: -moz-linear-gradient(top, #fff, #999);
  background-image: -o-linear-gradient(top, #fff, #999);
  background-image: linear-gradient(to bottom, #fff, #999);
}

@media print {
  ul {
    list-style: normal;
  }
  li {
    float: none !important;
    border: none;
  }
  .myGroup {
    border: none;
    position: relative !important;
    bottom: 0;
    display: inline;
    width: auto;
  }
}

<ul>
   <li>
      <p><strong>Test text</strong></p>
      <p>Test description</p>
      <div class="myGroup">Test Group</div>
   </li>
   <li>
      <p><strong>Test text</strong></p>
      <p>Test description</p>
      <div class="myGroup">Test Group</div>
   </li>
   <li>
      <p><strong>Test text</strong></p>
      <p>Test description</p>
      <div class="myGroup">Test Group</div>
   </li>
   ...
</ul>

Ensure the table row remains on one page when printing or viewing the print preview

Answer №1

Similar questions

Reinitializing AngularJS form controls

Customize the height of individual carousel items in Primeng carousel

Incorporating Scatter Dots into a Horizontal Stacked Bar Chart using Chart.js

fullPage.js with linear scroll

Why won't my code work with a jQuery selector?

Iconic Navigation: Bootstrap 3 Navbar featuring Carousel

"Integrating FullCalendar with Cloud Firestore for seamless data management

Automating item selection using Selenium in Python

Dealing with empty POST request bodies in Node.js Express is a common challenge

What is the best way to combine items from two separate lists into a single list by simply clicking on the items using JavaScript and PHP?

How can I implement a progress bar that mimics an exchange platform behind data-table components? [Using Vue and Vuetify]

Utilizing the Command Line/Window feature within Visual Studio Code

Leveraging this jQuery code across multiple div elements

Sliding out menu using AngularJS

What is the significance of a colon appearing at the start of HTML attribute names in a Vue template?

Creating dynamic DIVs that adjust fluidly to different screen

Encountering yet another frustrating issue with z-index not functioning properly in versions of IE above 7, despite extensive research yielding no solution

Is there a way to eliminate span tags from elements?

Processing PHP forms with dynamic form inputs

Can a viewport be designed with a minimum width?