Mantener el contenido de un div juntos para imprimir en IE8

Dado el siguiente documento HTML, debo mantener la línea "Título de tabla" en la misma página que el <table> cuando se imprime en IE8.Mantener el contenido de un div juntos para imprimir en IE8

A pesar de 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 un salto de página debe ser evitado y todo el div empujó a la página 2.

El tipo de documento es XHTML 1.0 Transicional, tengo <meta http-equiv="X-UA-Compatible" content="IE=8" /> conjunto para obligar a IE8 en las normas del modo en el que supposedly supports this syntax, y he comprobado el la renderización se realiza en modo estándar al marcar 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>

Fuente

2011-06-27 tomfanning

¿Por qué no utiliza el elemento 'caption' para el encabezado de la tabla? luego intenta poner 'page-break-inside: avoid;' dentro del elemento table. – whoabackoff

@whoabackoff - no funciona mejor. – tomfanning

apoyo para IE8 this feature is buggy.

Aunque Internet Explorer para Windows versión 8 admite el valor de evitar que sea un poco defectuoso en algunos lugares. Por ejemplo, si se aplica a un elemento p, el navegador intentará evitar dividir la página dentro del elemento como se esperaba; pero si se aplica a un elemento ul, toda la lista 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.

partir de este ejemplo, podemos concluir que tratará de no romper la página dentro de la página, ni dentro de la tabla, pero no va a combinar ambos. Puede probarlo teniendo un texto muy largo en su <p>.

Una forma de solucionar este problema sería incluir el título de la 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> 
    [...]

Fuente

2011-06-27 15:52:43 Kraz

Hola Kraz, eso es útil, ahora sé lo que está pasando. Gracias. ¿Tiene alguna sugerencia para una solución alternativa? Hay muchos datos tabulares que deben mostrarse, muchas tablas, cada uno de los cuales debe conservarse con su título y algún texto explicativo. – tomfanning

Agregue su _table title_ dentro de su mesa, es todo lo que puedo ver. Luego proteja su mesa y haga que el encabezado de la tabla sea diferente. (He editado mi respuesta con un ejemplo.) Lo mismo para el texto explicativo, colóquelo en su propia fila y cuélguelo (¿una clase CSS tal vez?). – Kraz

page-break sólo funciona en un contexto mediático paginado, como @media print:

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

Fuente

2014-09-24 14:29:14 WilliamK

intenta utilizar <th> y añadir el título

por ejemplo

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

uso de CSS @ media

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

Recientemente he creado versión impresa HTML que funciona bien! Espero que te ayude!

Fuente

2014-09-24 15:22:03

Mantener el contenido de un div juntos para imprimir en IE8

Respuesta

Cuestiones relacionadas