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:

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

PHP offers a different solution instead of using an HTML hidden input tag

A JavaScript or CSS file within an HTML document

Update the color of the menu ID

The PHP code embedded within the HTML document and triggered by an AJAX request failed to

Populate div with straight lines running vertically or horizontally

Avoiding special characters in URLs

Guide for adding an OnClick event to a MatTable row:

The not:first-child selector targets all elements except for the first one in the sequence

What is the best method to transfer and incorporate essays and information onto my HTML page?

A basic webpage created using ASP.NET featuring simple HTML text

Is Flash consistently positioned above the other elements? Can it be corrected using CSS

Is there any way to remove the two default aspNetHidden Divs in asp.net web forms?

Show values in an angular template using an array

PHP: Using conditional statements to adjust datetime formatting for CSS styling

Using JavaScript and Tampermonkey to convert strings from an HTML element into an array

Creating a post request in Express.JS with an empty object

Achieving perfect alignment both horizontally and vertically using CSS3's viewport height of 100%

Make sure that the input field and label are aligned side by side in the

What is the best way to pinpoint particular text within a paragraph that includes numerous line breaks?

Creating a multi-level JSON object from a string: A step-by-step guide