输出的HTML表并不适用于所有页面的页边距?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (102)

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

这是张大桌子。该表有顶部和底部边距,但仅在第一打印页中应用边距顶,在最后打印页中应用边距底部:

我该如何解决这个问题?我想要页面的页眉和页脚的固定位置,但是我想要的表格将边距应用于所有输出的页面。

提问于
用户回答回答于

你可以使用@页面选择器在页面周围添加空格,如下所示:

@page { margin: 50px }

热门问答

扩展能力之云调用,小程序端出错:[tcb-js-sdk]参数错误:非法的应用标识?

software微软、谷歌、腾讯、阿里、百度……
推荐
您好,appSign必须是小程序的appid,appSecret的两个字段必须是在云开发控制台-安全来源里配置过的。 image.png ... 展开详请

请问bugly上报的服务器是在哪?如果要发行海外版本,能把上报服务器调成海外吗?

serverless db 如何管理?

Richel码农
推荐
1.支持pg_dump,psql工具进行数据导入和导出。 2.本地CLI,可以使用postgresql的客户端psql,也可以使用dbeavr,navicate,pgadmin等工具访问。 3.支持操作DB ,要自己写逻辑 ... 展开详请

对象存储, 版本控制,没有提供对象的历史版本列表的查询API吗?

游戏联机对战引擎实时服务器怎么请求外部接口?

您好,实时服务器支持http访问内网,需要在实时服务器内下载request模块,同时把node_modules文件夹压缩打包上传发布实时服务器。

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

所属标签

扫码关注云+社区

领取腾讯云代金券