Question

鉴于以下HTML文档，我需要在IE8中打印时将“表标题”行保留在与<table>相同的页面上。

尽管page-break-inside:avoid;，但标题和表格之间仍有分页符。我对此的理解表明应该避免分页，并将整个div推到第2页。

doctype是XHTML 1.0 Transitional，我有<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>

Answer 1

IE8支持this feature is buggy。

虽然适用于Windows版本8的Internet Explorer支持该值，但它确实存在一些问题。例如，如果应用于p元素，浏览器将尝试避免按预期破坏元素内的页面;但如果应用于ul元素，整个列表不会设置为避免，因为列表可能跨越两个页面。也就是说，单个列表元素将尽量避免内部分页。

从这个例子中，我们可以得出结论，它将尝试不破坏p内部的页面，也不会破坏表格内部的页面，但它不会将两者结合起来。您可以在<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>
    [...]

Answer 2

page-break仅适用于分页媒体上下文，例如@media print：

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

Answer 3

尝试使用<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，它运行正常！希望它能帮到你！

将div的内容保存在一起，以便在IE8中打印

3 个答案: