tom*_*ing 7 css printing xhtml printing-web-page page-break-inside
鉴于以下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>
虽然适用于Windows版本8的Internet Explorer支持避免它在某些地方的小错误.例如,如果应用于ap元素,浏览器将尽量避免按预期破坏元素内的页面; 但是如果应用于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>
[...]
| 归档时间： |
|
| 查看次数： |
3814 次 |
| 最近记录： |