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.

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>

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

Reinitializing AngularJS form controls

Check out this codepen example: http://codepen.io/anon/pen/EjKqbW I'm trying to reset the form elements when the user clicks on "Reset". The div elements f1,f2,f3 should be hidden and the searchText box cleared. However, the reset button is not trig ...

Customize the height of individual carousel items in Primeng carousel

Hey there, I'm currently using the primeng carousel component and running into an issue where the carousel height is always based on the tallest item. I am looking to have an automatic height for each individual carousel item instead. Do you think th ...

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

My horizontal stacked bar chart is not displaying pink scatter dots based on the right y axis numbers. I need help figuring out what I am doing wrong. When I change the chart to a normal bar instead of horizontal, the dots appear. However, I require them ...

fullPage.js with linear scroll

Is there a way to implement fullpage.JS without any transitions between slides? I attempted the following setup, but it didn't work as expected: $('#fullpage').fullpage({ licenseKey: 'XXXXXXXX-XXXXXXXX-XXXXXXXX-XXXXXXXX', ...

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

I'm struggling to retrieve the value from a dynamically generated <div> using jQuery. It seems like the syntax I'm using doesn't recognize the div with an id tag. The HTML code is stored in a variable, and below is a snippet of code w ...

Iconic Navigation: Bootstrap 3 Navbar featuring Carousel

I'm currently in the process of developing a website using bootstrap3. Despite watching numerous tutorial videos, I am still facing challenges. One of my goals is to have the logo on the navbar aligning with the left side (which I've achieved ...

"Integrating FullCalendar with Cloud Firestore for seamless data management

Is It Possible to Integrate Observable with FullCalendar? I have a collection in Cloud Firestore and I want to display the data from this collection in real-time on FullCalendar. Although I know that using an Observable is necessary for this task, it see ...

Automating item selection using Selenium in Python

Currently, I am in the process of developing a software program to automate web database management. However, I have encountered an issue while trying to manipulate a table where I need to arrange the items based on one of the columns by clicking on the co ...

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

In my Node.JS project using Express framework, I am encountering an issue while trying to access the body of a POST request. The POST request is being sent through an HTML form, and upon checking with WireShark, I can see that the request is indeed getting ...

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?

Having encountered some issues with setting up a list of items and moving them between each other, I was wondering if it is possible to have multiple lists with a link inside each item that allows for moving it to a specified list. For example, having a li ...

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

I am working on a cryptocurrency exchange book simulator and I am trying to implement a progress bar that will be displayed behind the values in a table. https://i.stack.imgur.com/9gVsY.png This is the template for my data-table: < ...

Utilizing the Command Line/Window feature within Visual Studio Code

As a newcomer to Visual Studio Code, I'm currently using the latest Version: 1.29.1. When I used Matlab, I had access to a script window for writing code, a Command Window for testing code snippets and viewing variable values, as well as a workspace ...

Leveraging this jQuery code across multiple div elements

As a newcomer to jQuery, I am currently experimenting with a test script. My goal is to create an effect where when an image is clicked, a div slides down displaying more information similar to the new google images effect. The issue with the current scri ...

Sliding out menu using AngularJS

I have been attempting to create a slide out menu without success. My goal is for the text (home,users) to appear when the >> button is clicked. I seem to be stuck and can't figure out what I'm missing. This project also marks my initial ve ...

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

<circle r="3" :cx="airport.x" :cy="airport.y" class="airport__marker" /> Are the attributes v-bind:cx and v-bind:cy equivalent to what is shown above? ...

Creating dynamic DIVs that adjust fluidly to different screen

I have a section containing 4 centered divs. Here is what I want to achieve: When the screen width is over 1280px, display all 4 divs in a row. When the screen width is less than 1280px, show 2 divs per row. And when the screen width is under 640px, disp ...

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

I have scoured numerous resources and read countless articles on how to resolve z-index issues in IE 7, 8, and 9. However, none of the suggested solutions seem to work for my particular situation. The issue at hand is that I have interactive content posit ...

Is there a way to eliminate span tags from elements?

I need to replace all the span tags with the class "article" and add new span tags to the content <div class="asd"> <span class="location">Foo</span> <span class="article">bar</span> <span ...

Processing PHP forms with dynamic form inputs

Have a form with the capability to add multiple input fields for ordering pictures by picture number. A customer could potentially order anywhere from 1 to 100 pictures. How should I handle this in PHP? Creating up to 100 $_POST[] variables for each poss ...

Can a viewport be designed with a minimum width?

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport"> When viewing a website on a normal desktop, the window width is typically 1000px or more. However, on an iPhone, it's important to ensur ...