tablas - ¿Imprimiendo una tabla HTML con muchas columnas/filas usando el diseño CSS?
tablas en html ejemplos (3)
Quiero imprimir una tabla grande (tan grande que sus filas tengan aproximadamente 3 hojas de papel de ancho) desde HTML. Si es posible, CSS debería ser suficiente para el diseño y la solución debería funcionar con diferentes navegadores.
Actualmente estoy definiendo las siguientes reglas de estilo:
table { page-break-inside:auto; }
tr { page-break-inside:auto; }
Cuando inspecciono los elementos DOM, por ejemplo, en Firefox 33.0.2 (en OS X) puedo ver que las reglas se reconocen, pero luego cuando veo una vista previa de impresión ( Archivo | Imprimir | PDF | Abrir PDF en Vista previa ) todas las columnas que no encajan en la primera página, se cortan, es decir, recibo 1 página de salida impresa en lugar de 3. También he intentado Internet Explorer 11 y 10 con el mismo efecto.
Entonces, ¿cómo puedo diseñar tablas HTML grandes (en última instancia, grandes en términos de columnas y filas) para imprimirlas mediante CSS?
Pregunta extra: si los componentes del estilo de salto de página solo se aplican a los elementos a nivel de bloque como se indica en this respuesta anterior, ¿ayudaría si construyo mi tabla a partir de div s en lugar de td s cuando apunte a la salida de impresión?
ACTUALIZAR
Aquí hay una muestra relevante que acabo de probar en JSFiddle. (No tengo una cuenta allí, por lo que FWIK no puedo proporcionar un enlace directo).
HTML:
<body>
<table>
<tr>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</td>
</tr>
</table>
</body>
CSS:
table { page-break-inside:auto; }
td { border:1px solid lightgray; }
tr { page-break-inside:auto; }
Si trato de imprimir esta tabla (p. Ej., Aplicando Este marco | Imprimir marco ... | PDF | Abrir PDF en Vista previa a la vista de resultados de JSFiddle en Firefox 33.1 para OS X y para Tamaño de papel / Orientación A4 / Retrato) Aparece una página de salida. Se cortan todas las columnas, excepto la primera y parte de la segunda.
Es absolutamente necesario que se aleje de una tabla si necesita una impresión vertical legible en la página. Las tablas son excelentes para mostrarlas en la página cuando se trata de datos tabulares, pero no son una solución viable para imprimir ya que no respetan el flujo.
Hay complementos (como éste aquí, sin afiliación, solo un resultado de Google ) que lo harán automáticamente por usted, pero aquí está el ejemplo. Cuando uses esto, asegúrate de que la @media print esté listada apropiadamente. Para probar localmente, puedes cambiar eso a la @media screen .
Eso no mostrará las reglas de @page enumeradas, pero esas son visibles a través de una vista previa de impresión.
Espero que esto ayude:
Violín para imprimir en retrato.
HTML
<section class="table">
<div class="row">
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</div>
</div>
</section>
CSS
@media print {
@page {
margin: 2.5cm;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.2cm;
}
div.row {
display: block;
}
}
.table {
display: table;
border-spacing: 2px;
}
.row {
display: table-row;
}
.row > div {
display: table-cell;
border: solid 1px #ccc;
padding: 2px;
}
Editar - Imprimiendo horizontalmente en varias páginas:
Bien, entonces este es probablemente un caso de uso mucho menos común, y tenemos que hacer algunas cosas tontas con eso, así que es una advertencia justa. Trataré de explicar esto paso a paso, ya que es críptico y desagradable.
Violín para imprimir en paisaje aquí!
CSS
@media print {
@page {
margin: 0;
}
body {
height: 100%;
width: 100%;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.1cm;
font-size: 1rem;
}
div.row {
display: block;
margin: solid 2px black;
margin: 0.2cm 1cm;
font-size: 0;
white-space: nowrap;
}
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
}
Esta es la parte que importa, ya que está configurando sus directivas de impresión. La mayor parte de esto son cosas que hemos visto en el original (con algunos ajustes mientras jugaba con él).
La parte que nos importa viene aquí:
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
Lo que estamos haciendo es dejarlo todo de lado y luego deslizarlo hacia donde esperamos que esté. translate(8.5in, -100%) indica al navegador: deslice este elemento 8.5 pulgadas (el ancho de un papel de carta estándar en los EE. UU.) hacia la derecha, y luego deslícelo hacia arriba 100% de su altura (el negativo indica arriba a diferencia de abajo). Lo deslizamos a la derecha 8.5 pulgadas para que aparezca en la parte superior de la página cuando se gire. Lo deslizamos hacia arriba a su altura calculada para que no tengamos un hueco feo a la izquierda de la tabla cuando ocurre la rotación tampoco.
Luego, le indicamos que queremos que todos esos cálculos se realicen en relación con la bottom left de la posición normal del elemento en el flujo de documentos. Esto evita que esta mesa larga y loca se gire hacia la derecha al establecer la propiedad de la left . La propiedad de la bottom es importante porque la estamos rotando en el sentido de las agujas del reloj un cuarto de vuelta, y si lo hiciéramos desde la parte superior, estaría fuera de la página a la izquierda. Ese cuarto de vuelta se describe en la siguiente parte de la declaración de transform : rotate(90deg) ;
Voila La cosa se imprime en varias páginas.
Antes de preguntar : No. No hay forma de evitar el salto de página dentro del elemento del cual soy consciente. Sé que es desagradable, feo y toda esa basura, pero solo podemos trabajar con las herramientas que nos dan.
Actualización de Firefox confirmada funcionando:
Si desea forzar el salto de página, debe usar page-break-before page-break-after page-break-before o page-break-after . Debe saber que el elemento con estilo debe contener un elemento de nivel de bloque que no esté vacío y que no puede colocarse en absoluto. Sin embargo, es bastante inconsistente en los elementos de las tablas. Lo que nos lleva a su última pregunta: sí, sería más consistente construir sus tablas con divs .
Sin embargo, teniendo en cuenta lo que desea lograr (imprimir grandes tablas horizontales), debe saber que tratar de ajustar 3 páginas en 1 no puede funcionar, ya que su contenido no será legible. De hecho, la única práctica recomendada sería utilizar un diseño vertical en su lugar (solo para imprimir o para web e imprimir).
page-break-inside: auto; es el estilo predeterminado, por lo tanto, a menos que tenga una regla que los establezca de manera diferente, esas reglas no harán nada.
Si su tabla no se divide en varias páginas, es muy probable que haya agregado alguna otra regla que lo impida, supongo un overflow: hidden .
Lo primero que debe hacer es eliminar todos los estilos y ver si se imprime en varias páginas. Si es así, comience a agregar sus estilos nuevamente (regla por regla, o si es necesario línea por línea) para encontrar el problema.