How Can CSS Prevent Row Breaks When Printing Large HTML Tables?-CSS Tutorial-php.cn

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

Handling Page Breaks when Printing Large HTML Tables: CSS Approach

When printing an extensive HTML table, encountering page breaks that disrupt row continuity can be frustrating. To address this issue, consider using CSS page-break properties.

By specifying page-break-inside:auto for the

element, the browser attempts to complete the table on the current page before initiating a page break. Additionally, setting page-break-inside:avoid for the elements prevents rows from being split across pages.

To preserve header and footer visibility, employ page-break-after:auto in the

rules. This ensures that the current row is completed before a page break occurs, preventing the separation of header or footer information.

The following code demonstrates this approach:

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

Copy after login

By applying these CSS rules, you can control page breaks effectively, ensuring that rows are printed in complete form while maintaining the integrity of headers and footers.

The above is the detailed content of How Can CSS Prevent Row Breaks When Printing Large HTML Tables?. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：How Can I Use Sass Variables Successfully Within the CSS `calc()` Function? Next article：How Can I Center Text Over an Image Using CSS Positioning Instead of Flexbox?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn