7

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

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

doctype 是 XHTML 1.0 Transitional，我已经<meta http-equiv="X-UA-Compatible" content="IE=8" />设置强制 IE8 进入应该支持这种语法的标准模式，并且我已经通过检查验证了渲染是在标准模式下完成的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>
4

3 回答 3

6

IE8对此功能的支持是错误的。

尽管 Windows 版本 8 的 Internet Explorer 支持该值，但它在某些地方有一些错误。例如，如果应用于 ap 元素，浏览器会尽量避免按预期破坏元素内部的页面；但如果应用于 ul 元素，则不会将整个列表设置为避免，因为该列表可能跨越两个页面。也就是说，单个列表元素将尝试避免内部出现分页符。

从这个例子中，我们可以得出结论，它将尝试不破坏 p 内的页面，也不破坏 table 内的页面，但它不会将两者结合起来。您可以通过在<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-27T15:52:43.003 回答
1

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

@media print {
  tr {
    page-break-inside:avoid;
  }
}
于 2014-09-24T14:29:14.233 回答
0

尝试使用<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-24T15:22:03.030 回答