Question

我有这个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：

我该如何解决此问题？我需要页面的页眉和页脚的固定位置，但是我希望页边距的表格适用于所有打印的页面。

Answer 1

您可以使用@page选择器在页面周围添加间距，如下所示：

 let url= Object.entries(searchQuery).map(([query, value])=>{
            return `${query.toString()}=${value.toString()}`;
    }); 

    }

    if (url.length === 2){
        return `/search?${url[0]}&${url[1]}`;
    }

    if (url.length === 3){
        return `/search?${url[0]}&${url[1]}&${url[2]}`;
    }

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

1 个答案: