Home >Web Front-end >CSS Tutorial >How Can CSS Prevent Row Breaks When Printing Large HTML Tables?

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

Mary-Kate OlsenOriginal: 2024-12-20 00:45:16387browse

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>

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!

css html for while auto break using this table tr issue

Statement：

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

Previous article：How Can I Use Sass Variables Successfully Within the CSS `calc()` Function?Next article：How Can I Use Sass Variables Successfully Within the CSS `calc()` Function?

See more

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

Related articles