Error printing Bootstrap table in Chrome.

Question

I have a weird error when I want to print my webpage in Chrome. I am showing a table using Bootstrap, which is perfect for screen size (regardless of screen size). When I want to print a webpage in Chrome, the table is cropped and the print layout is perfect for Firefox.

I managed to reproduce my error in JSFiddle here .

Html code of my table:

<table class="table table-condensed"> <thead> <tr> <th>Col1</th> <th>Col2</th> <th>...</th> </tr> </thead> <tbody> <tr ng-repeat="..."> <td>...</td> <!-- ... --> </tr> <tr class="separator empty" /> </tbody> </table> 

Do you have an idea to fix this problem?
Maybe using another CSS bootstrap class for a table?

Answer 1

Specifying the initial zoom size printed all the content.

 @media print { body { zoom: .8 } } 

Fiddle: http://jsfiddle.net/HB7LU/11671/

Answer 2

Bootstrap 3 has a known bug that seems to be delayed until Bootstrap 4. The bug is related to responsiveness in print styles.

In my case, changing all my col-sm-* classes to col-sm-* classes worked fine.