Wie kann ich verhindern, dass HTML-Tabellenzeilen beim Drucken auf mehrere Seiten aufgeteilt werden?-CSS-Tutorial-php.cn

Wie kann ich verhindern, dass HTML-Tabellenzeilen beim Drucken auf mehrere Seiten aufgeteilt werden?

Patricia Arquette

Freigeben： 2024-12-14 22:56:14

Original

432 Leute haben es durchsucht

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

Beheben von Seitenumbrüchen beim Drucken von HTML-Tabellen

Beim Drucken umfangreicher HTML-Tabellen ist die Verwaltung von Seitenumbrüchen für die Aufrechterhaltung der Lesbarkeit von entscheidender Bedeutung. Um zu verhindern, dass Zeilen auf mehrere Seiten aufgeteilt werden, prüfen Sie die folgende Lösung:

Sie können CSS-Stile verwenden, um Seitenumbrüche in Ihrer HTML-Tabelle zu steuern:

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }

Nach dem Login kopieren

Hier ist eine Beispiel-HTML-Tabelle mit diesen Angewendete CSS-Stile:

<!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>

Nach dem Login kopieren

Die Implementierung dieser CSS-Regeln gewährleistet dass:

page-break-inside:avoid on tr elements verhindert Zeilenumbrüche innerhalb einer Seite.
page-break-after:auto on tr elements ermöglicht einen Seitenumbruch nach jedem Zeile, um sicherzustellen, dass sie nicht geteilt werden.
display:table-header-group und display:table-footer-group auf den Elementen thead und tfoot behalten die Kopf- und Fußzeile der Tabelle bei ihre jeweiligen Seiten.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass HTML-Tabellenzeilen beim Drucken auf mehrere Seiten aufgeteilt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!