tablas saltos salto página print para pagina imprimir horizontal formato ejemplo div con css printing

css - saltos - salto de pagina en html para imprimir



Cómo evitar saltos de página en una tabla al imprimir (4)

Tengo una página que estoy intentando configurar para imprimir. Esta página contiene un gran número de tablas individuales. Las tablas son de diferentes tamaños pero, en general, puedo ajustar de 2,5 a 3 tablas en cada página. Me gustaría poder evitar que las tablas se rompan por un salto de página. ¿Alguna idea de cómo puedo lograr eso?

Intenté esto:

.reportTable { page-break-inside: avoid; }

Desafortunadamente, la W3Schools page-break-inside solo parece ser compatible con Opera (según W3Schools - verifiqué que esto no funciona en Firefox 4.0.1).

Puedo hacer esto para forzar un salto de página antes de cada tabla:

.reportTable { page-break-after: always; }

Esto funciona para insertar los saltos de página y parece ser compatible con todos los navegadores principales, pero me deja con un montón de espacio desperdiciado en los documentos impresos (aproximadamente la mitad de cada página está en blanco). Realmente solo quiero un salto de página si la siguiente tabla completa no cabe en esta página.

Sé que tengo usuarios que utilizan Internet Explorer, Firefox y Safari, así que realmente me gustaría apoyarlos tanto como sea posible. Encontrar algo que también funcionaría en Chrome y Opera sería una gran ventaja.

¿Algunas ideas?


En la actualidad, parece que no hay forma de forzar a los navegadores que no son compatibles con el page-break-inside: avoid hacerlo.

Sin embargo, ya que puede ajustar de 2,5 a 3 tablas en cada página y prefiere no imprimir solo una tabla con el uso page-break-after: always; , puede optar por insertar un div especial que obliga a un salto de página después de cada dos tablas .

Por lo tanto, debería incluir <div class="pageBreak"></div> y ocultarlo para la pantalla, pero mostrarlo para imprimir. Y le darías un estilo de page-break-after: always; de page-break-after: always; . De esta manera, obtienes al menos dos tablas por página.

Otra sugerencia sería dejar que el usuario decida si desea o no imprimir una tabla por página o la cantidad que se ajuste (es posible que algunas se dividan en las páginas). Puede alternar una checkbox de checkbox para agregar el page-break-after: always; Estilo a las mesas.


No todas las impresoras son creadas igualmente.

Tiene problemas porque la impresora no está controlada por el navegador web o el código html. Está controlado por el controlador de impresora que viene con la impresora. Esta función (y su configuración) pertenece al propietario de la computadora que representa la página, no a usted.

Su código no puede saber de antemano cuántas líneas puede colocar la impresora conectada al sistema del usuario en una página o cómo la impresora colocará una tabla. Será diferente si un usuario con una impresora diferente abre la página. Al igual que las diferentes resoluciones de pantalla, hay diferentes resoluciones de píxeles de impresora.

Por lo tanto, todas las reglas que se aplican a diferentes pantallas (y sus desventajas) también se aplican a diferentes impresoras. No solo no puede saber dónde la impresora romperá una página, sino que incluso no puede saber qué tan grande es la página impresa, en términos de la cantidad de contenido que cabe en una página.

Para obtener toda una tabla (o varias tablas) en una página, el usuario debe seleccionar las partes que desea imprimir y luego usar Imprimir selección en el cuadro de diálogo de la impresora.


También he estado buscando una respuesta a esto. Lo más cercano a lo que vine es a saber aproximadamente cuántas líneas de salida cabrían en una página, luego calcular cuántas líneas de salida tenía la página. En su caso: 1) calcule cuántas líneas de salida puede ajustar en una página. 2) mantenga un registro de cuántas líneas ya ha utilizado al mostrar su primera tabla. 3) calcula cuántas líneas tomará la tabla 2. Agréguelo a las líneas de la tabla 1 y vea si todavía está por debajo de su umbral aproximado. Si es así, visualice la tabla, si no, ponga un div hacia abajo con el salto de página: siempre en ella para forzar una nueva tabla.

Esto le daría aproximadamente lo que está buscando, pero no será perfecto. de vez en cuando, tendrá una tabla que "podría" caber en la página anterior, pero simplemente no llegó al punto de corte porque tiene que estar en el lado bajo de la estimación de cuántas líneas caben en una página .

Sin embargo, no he encontrado una manera de calcular si el contenido dentro de una celda o algo así se envolverá en una nueva línea cuando se pegue en una página impresa.

Espero que te despierte una idea.


para solucionar esto, simplemente haga #table {page-break-after: auto;}