Al imprimir una tabla con muchas filas, puede surgir el problema de mantener los datos juntos cuando finaliza la página. Dado que los datos presentados continuamente tiene más sentido. Aquí rastrearemos las formas en que se pueden imprimir los contenidos de una tabla con muchas filas cuando se encuentra la situación de salto de página.
La propiedad más lógica que se puede usar para este propósito es el salto de página en CSS.
salto de página en CSS
Es una propiedad de CSS que ayuda a definir cómo se verán los elementos de una página cuando se impriman. Esto hace que la impresión del documento se parezca más a un libro.
page-break no es una propiedad que se pueda usar directamente, pero contiene tres propiedades que se pueden usar según el requisito:
- page-break-before : agrega un salto de página antes de un elemento
- page-break-after : agrega un salto de página después de un elemento
- page-break-inside : establece si se debe evitar o no el salto de página dentro de un elemento.
Sintaxis:
name_of_the_element { name_of_the_property: value;}
Ejemplo:
table {page-break-before: always;}
Aquí, nombre_del_elemento se refiere al salto de página del elemento en el que se requiere. (p. ej., tabla)
nombre_de_la_propiedad se refiere a la propiedad que se requiere aplicar al elemento. (p. ej., page-break-before)
el valor dicta cómo se supone que debe comportarse la propiedad dada cuando se imprime el documento. (por ejemplo, siempre)
Puede aplicarse donde se requiera, dentro de la tabla, antes o después de la tabla o antes o después de una fila, e incluso dentro de una fila. Pero deben aplicarse de manera que la salida formateada tenga sentido en una copia impresa.
Los siguientes programas le ayudarán a comprender mejor. Su salida solo se puede ver cuando se imprime, por lo que se ha adjuntado el pdf.
Programa 1: programa que toma una nueva página cuando comienza una tabla
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
table {page-break-before: always;}
</style>
</head>
<body>
hello from the Geeksforgeeks
<table>
<tr>
<th>s.no.</th>
<th>name</th>
</tr>
<tr>
<td> 1 </td>
<td> apple </td>
</tr>
<tr>
<td> 2 </td>
<td> mango </td>
</tr>
</table>
</body>
</html>
Salida:
página1:
página 2:
Programa 2: programa que toma una nueva página cuando comienza una tabla y cuando se requiere una nueva página al imprimir filas pero no entre filas.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
table {page-break-before: always;
font-size: 100px;}
tr{page-break-inside: avoid;
page-break-after: auto;}
</style>
</head>
<body>
hello from the Geeksforgeeks
<table>
<tr>
<th>s.no.</th>
<th>name</th>
</tr>
<tr>
<td> 1 </td>
<td> apple </td>
</tr>
<tr>
<td> 2 </td>
<td> mango </td>
</tr>
<tr>
<td> 3 </td>
<td> kiwi </td>
</tr>
<tr>
<td> 4 </td>
<td> banana </td>
</tr>
<tr>
<td> 5 </td>
<td> strawberry </td>
</tr>
<tr>
<td> 6 </td>
<td> guava </td>
</tr>
<tr>
<td> 7 </td>
<td> watermelon </td>
</tr>
</table>
</body>
</html>
Salida:
página1:
página 2:
página 3:
Todas estas salidas se generarán cuando se impriman, las salidas adjuntas arriba son capturas de pantalla de la vista previa de impresión.
Publicación traducida automáticamente
Artículo escrito por vanshikagoyal43 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA