Comment puis-je empêcher les lignes d'un tableau HTML de se diviser sur plusieurs pages lors de l'impression ?-tutoriel CSS-php.cn

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 ?

Dec 14, 2024 pm 10:56 PM

How Can I Prevent HTML Table Rows from Splitting Across Pages When Printing?

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 }

Copier après la connexion

Voici un exemple de tableau HTML avec ceux-ci Styles CSS appliqués :

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;table&gt;
        &lt;thead&gt;
            &lt;tr&gt;&lt;th&gt;heading&lt;/th&gt;&lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tfoot&gt;
            &lt;tr&gt;&lt;td&gt;notes&lt;/td&gt;&lt;/tr&gt;
        &lt;/tfoot&gt;
        &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;x&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;x&lt;/td&gt;
        &lt;/tr&gt;
        &lt;!-- 500 more rows --&gt;
        &lt;tr&gt;
            &lt;td&gt;x&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn