Maison >interface Web >tutoriel CSS >Comment puis-je empêcher les lignes d'un tableau HTML de se diviser sur plusieurs pages lors de l'impression ?
Comment puis-je empêcher les lignes d'un tableau HTML de se diviser sur plusieurs pages lors de l'impression ?
- Patricia Arquetteoriginal
- 2024-12-14 22:56:14535parcourir
Gérer les sauts de page dans l'impression de tableaux HTML
Lors de l'impression de tableaux HTML volumineux, la gestion des sauts de page est cruciale pour maintenir la lisibilité. Pour éviter que les lignes ne soient réparties sur plusieurs pages, explorez la solution suivante :
Vous pouvez utiliser des styles CSS pour contrôler les sauts de page dans votre tableau HTML :
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
Voici un exemple de tableau HTML avec ceux-ci Styles CSS appliqués :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tbody>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
La mise en œuvre de ces règles CSS garantit que :
- page-break-inside:avoid on tr elements empêche les sauts de ligne dans une page.
- page-break-after:auto on tr elements permet un saut de page après chaque rangée, en vous assurant qu'ils ne sont pas divisés.
- display:table-header-group et display:table-footer-group sur les éléments thead et tfoot conservent l'en-tête et le pied de page du tableau sur leurs pages respectives.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!