logo标签列表

打印的HTML表格在所有页面上都不应用边距

htmlcsspage-breakprinting-web-pagepage-break-inside
7

I have this html:

<!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;
        margin-top: 50mm;
        margin-bottom: 50mm;
    }
    tr    { page-break-inside: auto; page-break-after: auto }
    thead { display: table-header-group;}
    tfoot { display: table-footer-group;}

    #header { 
        position: fixed; 
        width: 100%; 
        top: 0; 
        left: 0; 
        right: 0;
    }
    #footer { 
        position: fixed; 
        width: 100%; 
        bottom: 0; 
        left: 0;
        right: 0;
    }
</style>
</head>
<body>

    <div id="header"> 
        <p>Personalised header</p> 
    </div>
    <div id="footer"> 
        <p>Personalised footer</p> 
    </div> 

    <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>
        <tr>
            <td>x</td>
        </tr>

        <tr>
            <td>x</td>
        </tr>
        <!-- Mor than 500 similar tr-->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

这是一个大表格，表格有上下边距，在第一页只应用margin-top，在最后一页只应用margin-bottom：

First printed page with padding-top

Middle printed pages without paddings

如何解决这个问题？我想要页面头部和页脚的固定位置，但表格希望在所有打印页中都应用边距。
2个回答
2
您可以使用@page选择器来添加页面间距，如下所示：
@page { margin: 50px }
实际上这是可行的，但我简化了问题，忽略了一个重要部分。 我想在每个打印页面上有页眉和页脚。 我修改了问题的陈述。 抱歉。我投了正面票，因为你的答案是正确的。 - hlastras
2
@hlastras 这里有一篇很棒的文章 http://www.jessicaschillinger.us/2017/blog/print-repeating-header-browser/ - Furkan Poyraz
谢谢，这不是我想要的东西，但我认为我可以适应它。 - hlastras
1
我能够用以下方式做到这一点。
@media print {
   table {
       position: relative;
       top: 50px;
   }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接