Wie kann ich Zeilenumbrüche beim Drucken großer HTML-Tabellen verhindern?-CSS-Tutorial-php.cn

Wie kann ich Zeilenumbrüche beim Drucken großer HTML-Tabellen verhindern?

Patricia Arquette

Freigeben： 2024-12-26 03:46:09

Original

370 Leute haben es durchsucht

How Can I Prevent Row Breaks When Printing Large HTML Tables?

Verwalten von Seitenumbrüchen beim Drucken von HTML-Tabellen

Beim Drucken umfangreicher HTML-Tabellen ist das Verwalten von Seitenumbrüchen von entscheidender Bedeutung, um das unschöne Abschneiden von Zeilen zu vermeiden. Ein gängiger Ansatz wird in der ursprünglichen Frage vorgeschlagen: Verwendung gestapelter DIVs anstelle von Tabellen und Durchsetzung notwendiger Seitenumbrüche. Bevor wir jedoch mit einer solch bedeutenden Änderung beginnen, sollten wir uns mit einer alternativen Lösung befassen, die die Verwendung von Tabellen beibehält.

Der Schlüssel zur effektiven Verwaltung von Seitenumbrüchen liegt in den CSS-Eigenschaften. Indem Sie die folgenden CSS-Regeln auf Ihre Tabelle anwenden, können Sie verhindern, dass Zeilen auf mehrere Seiten aufgeteilt werden:

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

Die Eigenschaft page-break-inside für die Tabelle gibt an, dass Seitenumbrüche innerhalb der Tabelle auftreten können. Die Eigenschaft „page-break-inside“ für die Zeilen stellt sicher, dass Zeilen nicht auf mehrere Seiten aufgeteilt werden, und die Eigenschaft „page-break-after“ verhindert einen Seitenumbruch unmittelbar nach einer Zeile. Schließlich stellen die Anzeigeeigenschaften für die Kopf- und Fußzeilenelemente der Tabelle sicher, dass sie zu Druckzwecken mit der Tabelle verknüpft sind.

Unten finden Sie eine modifizierte HTML-Tabelle, die diese CSS-Eigenschaften enthält:

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

Durch die Implementierung dieser CSS-Regeln können Sie Zeilenumbrüche effektiv verhindern und die Integrität Ihrer gedruckten Tabelle über mehrere Seiten hinweg sicherstellen.

Das obige ist der detaillierte Inhalt vonWie kann ich Zeilenumbrüche beim Drucken großer HTML-Tabellen verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!