保留div的內容以便在IE8中打印

鑑於以下HTML文檔，我需要在「IE8」中打印時將「表格標題」行保留在與<table>相同的頁面上。保留div的內容以便在IE8中打印

儘管page-break-inside:avoid;，標題和表之間仍然存在分頁符。我對此的理解暗示分頁符應避免與整個div被推到第2頁

文檔類型是XHTML 1.0過渡，我有<meta http-equiv="X-UA-Compatible" content="IE=8" />設置爲強制IE8爲標準模式，其supposedly supports this syntax，我已經驗證了渲染是通過檢查document.compatMode == "CSS1Compat"在標準模式下完成的。 XHTML是有效的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=8" /> 
    <title>Page title</title> 
</head> 
    <body> 
    <h1>Page content</h1> 
    this is some content 
    <br />which<br />should<br />push<br />the<br />table<br />below<br />on<br />to<br />the<br />next<br />page<br />but<br />the<br />table<br />should<br />be<br />kept<br />together<br />if<br />at<br />all<br />possible<br />please! 

    <div style="page-break-inside:avoid;"> 
     <p><strong>Table title which needs to be kept with the table</strong></p> 
     <table> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     <tr><td>one</td><td>two</td><td>three</td></tr> 
     </table> 
    </div> 
    </body> 
</html>

來源

2011-06-27 tomfanning

爲什麼你不使用表頭的'caption'元素？然後嘗試在表格元素內放入「page-break-inside：avoid;」。 – whoabackoff

@whoabackoff - 沒有更好的工作。 – tomfanning

IE8支持this feature is buggy。

儘管用於Windows版本8的Internet Explorer支持該值，但它避免了它在某些地方的小錯誤。例如，如果應用於p元素，瀏覽器將嘗試避免按預期打破元素內的頁面;但如果將應用於ul元素，則整個列表未設置爲避免，因爲列表可能跨越兩頁。也就是說，單個列表元素將盡量避免在內部出現分頁符。

從這個例子中，我們可以得出結論，它會嘗試不會破壞頁面內部，也不會在表格內，但它不會將兩者結合起來。您可以通過在<p>中輸入非常長的文字來測試它。

解決這一問題將包括在表的標題道：

<table style="page-break-inside:avoid;" border="1"> 
    <tr><th colspan="3">Table title which needs to be kept with the table</th></tr> 
    <tr><td>one</td><td>two</td><td>three</td></tr> 
    <tr><td>one</td><td>two</td><td>three</td></tr> 
    [...]

來源

2011-06-27 15:52:43 Kraz

嗨克拉茲 - 這很有幫助，現在我知道發生了什麼事。謝謝。您是否有任何解決方法的建議？有很多需要顯示的表格數據 - 很多表格 - 每個表格都需要保留其標題和一些說明文字。 – tomfanning

將您的_table title_添加到您的表格中，這是我所能看到的。然後剝皮你的桌子，並使表格標題不同。（我用一個例子編輯了我的答案。）同樣的解釋性文字，把它放在自己的行和皮膚中（一個css類可能？）。 – Kraz

page-break僅適用於紙質媒介背景下，像@media print：

@media print { 
    tr { 
    page-break-inside:avoid; 
    } 
}

來源

2014-09-24 14:29:14 WilliamK

嘗試使用<th>和添加標題

例如

<table> 
    <tr> 
     <th>your title</th> 
    </tr> 
    <tr> 
     <td>one</td> 
     <td>two</td> 
     <td>three</td> 
    </tr> 
</table>

CSS使用@ media

@media print { 
    tr th { 
    page-break-inside:avoid; 
    } 
}

最近我創建的打印版本的HTML它工作正常！希望它可以幫助你！

來源

2014-09-24 15:22:03

保留div的內容以便在IE8中打印

回答

相關問題