Chrome打印正在切斷tr元素之間的多列css

https://plnkr.co/edit/QoO2hWmXVhSCSyA4bUh4?p=preview

<style type="text/css"> 
      table { 
       border-collapse: collapse; 
      } 

      table, th, td { 
       border: 1px solid black; 
      } 
      @page { 
       size: auto; /* auto is the initial value */ 
       margin: 5mm 7mm 5mm 7mm; /* margin you want for the content */ 
      } 

      html { 
       background-color: #FFFFFF; 
       margin: 0px; /* this affects the margin on the html before sending to printer */ 
      } 
      table { page-break-inside: avoid } 
      tr { page-break-inside: avoid; page-break-after: avoid } 
      thead { display: table-header-group } 
      tfoot { display: table-footer-group } 
      .paper { 
       font-size: 11pt; 
       -webkit-print-color-adjust: exact; 
       -moz-column-count: 2; 
       -moz-column-gap: 10px; 
       -webkit-column-count: 2; 
       -webkit-column-gap: 10px; 
       column-count: 2; 
       column-gap: 10px; 
      } 

      .website { 
       font-size: 11pt; 
       -webkit-print-color-adjust: exact; 
       -moz-column-count: 2; 
       -moz-column-gap: 10px; 
       -webkit-column-count: 2; 
       -webkit-column-gap: 10px; 
       column-count: 2; 
       column-gap: 10px; 
      } 

      .inline { 
       -webkit-print-color-adjust: exact; 
       display: inline-block; 
       width: 100%; 
      } 

      .customer-color { 
       -webkit-print-color-adjust: exact; 
       background-color: rgba(38, 194, 129, 0.1); 
      } 

      .partner-color { 
       -webkit-print-color-adjust: exact; 
       background-color: rgba(227, 91, 90, 0.1); 
      } 
     </style>

這是我的CSS樣式。你可以嘗試從plunkr打印，並會看到發生這種情況，我試過從後面的帖子，Why is Chrome cutting off text in my CSS3 multi-column layout?解決方案，但無法解決問題。該帖子似乎是從2010年開始的，所以2016年可能會有新的解決方案？

來源

2016-09-06 Zanko

如果您設置頁邊距爲0，它不應該被切斷。 –

謝謝您的迴應，如果我設置保證金0，那麼我會遇到打印邊距問題？更新：我剛剛測試了保證金0，問題仍然存在 – Zanko

嘗試設置輸出以適合屏幕和邊距爲0.我說的是打印機設置的方式，而不是打印CSS。 –

我遇到了類似的問題，也許這可能有幫助。檢查您的CSS媒體查詢。

問題：打印導致頁面底部的內容被切斷/丟失。

理論：

打印：print.window檢測頁面內容/尺寸（X）與上下文（X）
部隊紙頁尺寸/佈局
較小的紙頁尺寸觸發CSS媒體查詢
佈局變化。在我的情況引導程序的col-md-6，刪除浮動。
其中拉長頁（Y）
Y> X ==>產生遺漏的內容

我的解決辦法，以解決@media查詢，以保持我預計的佈局。

有用的工具： Chrome瀏覽器開發工具>更多工具>渲染>模擬CSS媒體>打印

來源

2017-06-13 15:47:17 ssoward

非常感謝您提供解決方案，我將在有一天再嘗試這樣做時再嘗試！ – Zanko

Chrome打印正在切斷tr元素之間的多列css

回答

相關問題