es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La altura de la tabla CSS dejó de funcionar repentinamente en varios navegadores.

10 Jun, 2023 Programación

No he impreso un calendario en varios meses, pero ahora ya no respeta el atributo de altura CSS como solía hacerlo. El atributo de altura funciona bien en el navegador (pantalla) pero no al imprimir. He intentado con altura fija, porcentaje e incluso 100vw que vi en otro post, agregando etiquetas <section/>, etc. sin éxito. Dejó de funcionar en Chrome, Edge, incluso Brave más o menos al mismo tiempo. Sigue funcionando en Firefox. Incluso reduciéndolo a una página bastante simple no está funcionando http://DatesAndTimes.com/dates/test.html.

CSS height is ignored, resulting in table being collapsed to minimum size allowed by the text in the cells of each row

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <style>
table {
   width: 100%;
   height: 900px;
}
table > thead > tr > th {
   border-style: outset;
   border-color: #333333;
   text-align: center;
}
table > tbody > tr > td {
   border-style: inset;
   border-color: #333333;
   text-align: right;
}
table > tbody > tr.new-page {
   page-break-before: always;
}
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr><th>Fila ?</th></tr>
   </thead>
   <tbody>
    <tr><td>Página 1 Fila 1</td></tr>
    <tr><td>Página 1 Fila 2</td></tr>
    <tr class="new-page"><td>Página 2 Fila 1</td></tr>
    <tr><td>Página 2 Fila 2</td></tr>
   </tbody>
  </table>
 </body>
</html>

¿Hay una nueva forma de hacer que una tabla llene cada página?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el atributo height de CSS ya no funciona al imprimir un calendario en algunos navegadores, pero aún funciona en Firefox. El problema ocurre incluso al intentar fijar la altura, porcentaje o 100vw y agregar etiquetas <section/>. La tabla se colapsa al tamaño mínimo permitido por el texto en las celdas de cada fila. El código proporcionado muestra un ejemplo donde se establece la altura de una tabla en 900px, pero no se respeta al imprimir.

    Una forma de solucionar esto es usar la propiedad page-break-before de CSS para cada fila, como se muestra en el código. Esto obligará a que se cree una nueva página para cada fila que tenga la clase new-page.

    Otra forma de abordar este problema es usar las reglas @media print de CSS para ajustar el diseño específicamente para la impresión. Esto puede incluir el ajuste de tamaños de fuente, márgenes, rellenos y otras propiedades que afecten el diseño.

    También es importante tener en cuenta que diferentes navegadores pueden tener diferentes configuraciones de impresión predeterminadas, lo que puede afectar cómo se renderiza el calendario. Para asegurar una impresión consistente en diferentes navegadores, es mejor utilizar la regla @page de CSS para definir el tamaño y los márgenes de la página impresa.

    En general, no existe una solución universal para este problema, por lo que puede requerir cierta experimentación y ajuste para lograr el resultado deseado.

Comments are closed.