我有一个项目,需要打印一个包含许多行的HTML表.

我的问题是表格打印在多页上的方式.它有时会将一行一分为二,使其无法阅读,因为其中一半位于页面的最前沿,其余部分则打印在下一页的顶部.

我能想到的唯一可行的解决方案是使用堆叠的div,而不是一个表,并在需要时强制分页符..但在经历整个变化之前,我想我可以在这里问一下.

推荐答案

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

Html相关问答推荐

值更新时旋转数字动画

弹性项在主轴方向溢出

根据屏幕大小拆分长行列表

OnChange函数未在下拉列表中使用一个选项触发

如何在HTML中适当地为单选按钮网格添加标签?

try 更新我的Node.js应用程序中的用户,但我收到错误.然而,当我使用postman 时,更新工作正常

我如何确保我的网格永远不会小于它的子网格

布局更改时的转换

HTML 邮箱在 Gmail 中无法正确显示

如何为高度较小的块制作边框动画?

Div 容器不会遵守边距、填充或间隙

在 laravel 中使用 DomPDF 将数据导出为 pdf 时,第二列被拉伸

使用 R markdown 在 html 中包含图像

如何将元素均匀分布到容器的边缘?

将图像高度调整到容器 div 中而不使其高度增加

让 Iframe 覆盖整个页面

在 html 邮箱的左侧和右侧制作多个元素很热门吗?

具有淡入/淡出效果的 CSS 选框

如何向上移动图像并溢出图像的一部分而另一部分不溢出

隐藏在标题后面的下拉菜单