posicionamiento - posicionar div css
Mantenga los contenidos de un div juntos para imprimir en IE8 (3)
El soporte IE8 para esta característica es defectuoso .
Aunque Internet Explorer para Windows versión 8 admite el valor evite, es un poco problemático en algunos lugares. Por ejemplo, si se aplica al elemento ap, el navegador intentará evitar que se rompa la página dentro del elemento como se esperaba; pero si se aplica a un elemento ul, la lista completa no está configurada para evitar, ya que la lista puede abarcar las dos páginas. Dicho esto, el elemento de lista individual intentará evitar tener un salto de página dentro.
A partir de este ejemplo, podemos concluir que intentará no romper la página dentro de la p, ni dentro de la tabla, pero no combinará ambas. Puedes probarlo teniendo un texto muy largo en tu <p> .
Una forma de arreglar esto sería incluir su título en su tabla:
<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>
[...]
Dado el siguiente documento HTML, debo mantener la línea "Título de la tabla" en la misma página que la <table> cuando se imprime en IE8.
A pesar del page-break-inside:avoid; , todavía hay un salto de página entre el título y la tabla. Mi comprensión de esto sugiere que se debe evitar un salto de página y todo el div avanzó a la página 2.
El doctype es XHTML 1.0 Transitional, tengo <meta http-equiv="X-UA-Compatible" content="IE=8" /> configurado para forzar IE8 en el modo estándar que supuestamente admite esta sintaxis , y he verificado la representación se está haciendo en modo estándar al verificar document.compatMode == "CSS1Compat" . El XHTML es válido.
<!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>
Intenta usar <th> y agrega el título
por ejemplo
<table>
<tr>
<th>your title</th>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
CSS usa @ media
@media print {
tr th {
page-break-inside:avoid;
}
}
¡Recientemente he creado la versión impresa HTML, funciona bien! Espero que te ayude!
page-break solo funciona en un contexto multimedia paginado, como @media print :
@media print {
tr {
page-break-inside:avoid;
}
}