由谷歌瀏覽器或Safari打印時，HTML表格被切斷（太寬）

我有這段HTML，當我嘗試打印它時（在Chrome或Safari中），表格被簡單地切斷，而不是跨越到多個頁面。由谷歌瀏覽器或Safari打印時，HTML表格被切斷（太寬）

有沒有人有這方面的解決方法？或者我可以申請一些CSS來修復它？

<!doctype html> 
<html> 
    <body> 
     <table> 
      <tr> 
       <td><div>this_is_box_a</div></td> 
       <td><div>this_is_box_b</div></td> 
       <td><div>this_is_box_c</div></td> 
       <td><div>this_is_box_d</div></td> 
       <td><div>this_is_box_e</div></td> 
       <td><div>this_is_box_f</div></td> 
       <td><div>this_is_box_g</div></td> 
       <td><div>this_is_box_h</div></td> 
       <td><div>this_is_box_i</div></td> 
       <td><div>this_is_box_j</div></td> 
       <td><div>this_is_box_k</div></td> 
       <td><div>this_is_box_l</div></td> 
       <td><div>this_is_box_m</div></td> 
       <td><div>this_is_nox_n</div></td> 
      </tr> 
     </table> 
    </body> 
</html>

順便說一句，我使用的<div>的原因是爲了能做到以下幾點，這也表現出了同樣的問題。

<!doctype html> 
<html> 
    <head> 

     <style> 
      body { 
       margin-top: 20em; 
      } 

      td { 
       position: relative; 
      } 

      div { 
       position: absolute; 
       bottom: -3px; 
       -webkit-transform: rotate(-45deg); 
       -webkit-transform-origin: 0% 0%; 
      } 
     </style> 

    </head> 

    <body> 
     <table> 
      <tr> 
       <td><div>this_is_box_a</div></td> 
       <td><div>this_is_box_b</div></td> 
       <td><div>this_is_box_c</div></td> 
       <td><div>this_is_box_d</div></td> 
       <td><div>this_is_box_e</div></td> 
       <td><div>this_is_box_f</div></td> 
       <td><div>this_is_box_g</div></td> 
       <td><div>this_is_box_h</div></td> 
       <td><div>this_is_box_i</div></td> 
       <td><div>this_is_box_j</div></td> 
       <td><div>this_is_box_k</div></td> 
       <td><div>this_is_box_l</div></td> 
       <td><div>this_is_box_m</div></td> 
       <td><div>this_is_nox_n</div></td> 
      </tr> 
      <tr> 
       <td>this_is_box_a</td> 
       <td>this_is_box_b</td> 
       <td>this_is_box_c</td> 
       <td>this_is_box_d</td> 
       <td>this_is_box_e</td> 
       <td>this_is_box_f</td> 
       <td>this_is_box_g</td> 
       <td>this_is_box_h</td> 
       <td>this_is_box_i</td> 
       <td>this_is_box_j</td> 
       <td>this_is_box_k</td> 
       <td>this_is_box_l</td> 
       <td>this_is_box_m</td> 
       <td>this_is_nox_n</td> 
      </tr> 
     </table> 
    </body> 
</html>

爲了澄清略多，當我打印文檔時，我得到的一個輸出頁面。該頁面的輸出如下所示。我希望它能夠跨越2頁。

image showing cut off text

來源

2011-11-01 Bill Lynch

跨度到多個頁面？你的意思是像繼續運行並啓用水平滾動條？如果是這樣，我只是測試和Chrome瀏覽器沒有這樣做的問題。無法在safari上測試，但我認爲它不會。也許你添加的CSS是問題。 –

@碎紙機：當我嘗試打印頁面時出現問題。 –

@Shredder：在HTML的第一版中也存在這個問題。該版本沒有包含額外的CSS。 –

你的意思是，該表熄滅頁的邊緣，只印什麼時候？你不能只設置表格的寬度，以及CSS中各個列的寬度。

相應地給第一行中的tds分開類並設置寬度。如果您只需要css來更改打印輸出，則可以設置單獨的僅打印樣式表。

來源

2011-11-01 23:10:53

我不會自動知道列的寬度..我希望這是由渲染引擎自動生成的......我不確定那會讓我反正什麼。 –

好吧 - 我在想，如果你縮小了列的範圍，你就可以在單頁上找到它們並避免這個問題。或者我認爲你正在尋找類似的CSS這個前面的問題：[鏈接]（http://stackoverflow.com/questions/1763639/how-to-deal-with-page-breaks-when-printinga-a- large-html-table） –

在我正在使用的這個真實的地方，我有比這裏顯示的更多的列。也不可能縮小它們的寬度。大多數列保存0或1的整數值。 –

由谷歌瀏覽器或Safari打印時，HTML表格被切斷（太寬）

回答

相關問題