Bug while printing a Bootstrap table on Chrome

Question

I have a weird bug when I want to print my webpage under Chrome. I display a table using Bootstrap, which fits perfectly the screen size (whatever the screen size is). When I want to print the webpage under Chrome, the table is cropped, whereas the printing layout is perfect using Firefox.

I have managed to reproduce my bug on JSFiddle here.

The html code of my table is :

<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 any idea to fix this issue?
Maybe using different Bootstrap css class for the table?

Answer 1

Specifying a initial zoom size printed all the contents.

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

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

Answer 2

There is a known bug in Bootstrap 3 that it seems has been put off till Bootstrap 4. The bug has to do with responsiveness being applied in printed styles.

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