Lỗi khi in bảng Bootstrap trên Chrome

Question

Tôi gặp lỗi lạ khi tôi muốn in trang web của mình trong Chrome. Tôi hiển thị một bảng bằng cách sử dụng Bootstrap, mà hoàn toàn phù hợp với kích thước màn hình (bất kể kích thước màn hình). Khi tôi muốn in trang web dưới Chrome, bảng được cắt, trong khi bố cục in hoàn hảo bằng Firefox.

Tôi đã quản lý để tạo lại lỗi của mình trên JSFiddle here.

Mã html của bảng của tôi là:

<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> 

Bạn có bất cứ ý tưởng để khắc phục vấn đề này?
Có thể sử dụng lớp css Bootstrap khác nhau cho bảng?

Answer 1

Chỉ định kích thước thu phóng ban đầu được in tất cả nội dung.

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

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

Answer 2

Có một lỗi được biết đến trong Bootstrap 3 mà nó dường như đã được trì hoãn cho đến khi Bootstrap 4. lỗi đã làm với đáp ứng được áp dụng trong phong cách in.

Trong trường hợp của tôi, hãy thay đổi tất cả các lớp học col-sm-* thành col-xs-* của chúng tôi hiệu quả.