"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo puedo repetir los encabezados de las tablas en cada página al imprimir?

¿Cómo puedo repetir los encabezados de las tablas en cada página al imprimir?

Publicado el 2024-12-25
Navegar:955

How Can I Repeat Table Headers on Each Page When Printing?

Repitiendo encabezados de tabla en modo de impresión

Cuando una tabla abarca varias páginas durante la impresión, a menudo es deseable tener las filas de encabezado (elementos TH ) repetido en cada página para una fácil referencia. CSS proporciona un mecanismo para lograr esto.

Solución: usar el elemento THEAD

El elemento THEAD en CSS está diseñado específicamente para este propósito. Le permite definir un conjunto de filas de encabezado que deben repetirse en cada página impresa. Aquí se explica cómo usarlo:

  1. Envuelva los encabezados de la tabla en un elemento THEAD:

    Header 1Header 2Header 3
  2. Agregue el siguiente estilo a su regla @page:

    @page {
      margin: 1cm;
      @top-left {
        content: element(thead);
      }
    }

Explicación:

  • El elemento thead sirve como contenedor para las filas del encabezado.
  • La @ La regla de página establece los márgenes de la página e incluye una subregla @top-left con la propiedad de contenido establecida en elemento (cabeza).
  • Esta configuración indica al navegador que muestre el contenido de el elemento THEAD en la esquina superior izquierda de cada página impresa, repitiendo efectivamente los encabezados de la tabla.

Al utilizar el elemento THEAD, puede asegurarse de que los encabezados de su tabla se muestren de manera consistente en cada página impresa. proporcionando una referencia clara y conveniente para sus lectores.

Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3