Fatal编程技术网
  • css/
  • Css 将div的内容保存在一起，以便在IE8中打印

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

css printing

Css 将div的内容保存在一起，以便在IE8中打印,css,xhtml,printing,printing-web-page,page-break-inside,Css,Xhtml,Printing,Printing Web Page,Page Break Inside,给定以下HTML文档，在IE8中打印时，我需要将“表标题”行与保持在同一页面上 尽管内部有分页符：避免，标题和表格之间仍有分页符。我对这一点的理解是，应该避免分页符，并将整个div推到第2页 doctype是XHTML 1.0过渡版，我已将设置为强制IE8进入标准模式，我已通过检查document.compatMode==“CSS1Compat”验证了渲染是在标准模式下完成的。XHTML是有效的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

给定以下HTML文档，在IE8中打印时，我需要将“表标题”行与
保持在同一页面上

尽管内部有
分页符：避免，标题和表格之间仍有分页符。我对这一点的理解是，应该避免分页符，并将整个
div
推到第2页

doctype是XHTML 1.0过渡版，我已将
设置为强制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>




页面标题
页面内容
这是一些内容

哪个
应该
把
下一页
的
表格
推到
下一页
但是
表格
应该
放在一起
如果
在
所有
可能的
请！
需要与表格一起保存的表格标题

一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三
一二三

IE8对的支持

尽管Internet Explorer for Windows版本8支持该值，但它在某些地方有点缺陷。例如，如果应用于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>
    [...]




需要与表格一起保存的表格标题
一二三
一二三
[...]

分页符
仅适用于分页媒体上下文，如
@media print
：


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


尝试使用
并添加标题

比如说


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



最近我已经创建了打印版HTML它的作品很好！希望它能帮助你
 为什么不在表头使用
标题
元素？然后试着把
分页符放进去：避免在table元素中。@whoabackoff-没有更好的效果。嗨，Kraz-这很有帮助，现在我知道发生了什么。谢谢你对解决办法有什么建议吗？有很多表格数据需要显示-很多表格-每个表格都需要保留标题和一些解释性文字。将表格标题添加到表格中，这是我所能看到的。然后对表格进行蒙皮，使表格标题不同。（我用一个例子编辑了我的答案。）同样，对于解释性文本，把它放在自己的行中，并对其进行蒙皮（可能是css类？）。

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