{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 孤傲高冷的网名 的问题《Keep contents of a div together for printing in IE》','https://www.manongdao.com/q-629199.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Given the following HTML document, I need to keep the "Table title" line on the same page as the <table> when being printed in IE8.
Despite the page-break-inside:avoid;, there is still a page break between the title and the table. My understanding of this suggests a page break should be avoided and the whole div pushed on to page 2.
The doctype is XHTML 1.0 Transitional, I have <meta http-equiv="X-UA-Compatible" content="IE=8" /> set to force IE8 into Standards Mode which supposedly supports this syntax, and I have verified the rendering is being done in standards mode by checking document.compatMode == "CSS1Compat". The XHTML is valid.
<!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>
page-breakonly works on a paged media context, like@media print:IE8 support for this feature is buggy.
From this example, we can conclude it will try to not break the page inside the p, nor inside the table, but it won't combine both. You can test it by having a really long text in your
<p>.A way to fix this would be to include your title in your table :
Try to use
<th>and add titlefor example
CSS use
@ mediaRecently i have created print version HTML it works fine! hope it helps you!