多浏览器打印场景下CSS表格height属性失效 如何实现表格撑满每页？

这是Chromium内核2023年前后更新打印渲染逻辑导致的兼容性问题，Chrome、Edge、Brave均采用该内核，因此同步出现表格height属性在打印场景失效的问题，仅Firefox的Gecko内核保留了原有渲染逻辑。
以下是可直接落地的实现方案：

核心修改点 #

• 新增@page规则固定打印页面尺寸与边距
• 针对打印媒体查询，显式设置html、body的高度为100%，清除默认边距
• 表格同时配置height: 100%与min-height: 100%，新增table-layout: fixed强制固定布局
• 替换旧版分页属性为CSS新规范的break-before: page提升兼容性

修改后完整代码 #

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <style>
@page {
  size: A4 portrait;
  margin: 1cm;
}
@media print {
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
}
table {
  width: 100%;
  height: 100%;
  min-height: 100%;
  table-layout: fixed;
}
table > thead > tr > th {
  border-style: outset;
  border-color: #333333;
  text-align: center;
}
table > tbody > tr > td {
  border-style: inset;
  border-color: #333333;
  text-align: right;
}
table > tbody > tr.new-page {
  break-before: page;
}
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr><th>Row ?</th></tr>
   </thead>
   <tbody>
    <tr><td>Page 1 Row 1</td></tr>
    <tr><td>Page 1 Row 2</td></tr>
    <tr class="new-page"><td>Page 2 Row 1</td></tr>
    <tr><td>Page 2 Row 2</td></tr>
    <!-- 如需行均匀撑开页面，可新增一行无内容的tr占满剩余高度 -->
    <tr style="height: 100%;"><td></td></tr>
   </tbody>
  </table>
 </body>
</html>

打印操作注意事项 #

• 打开打印预览后，将缩放比例设置为100%，不要勾选「适应纸张宽度/高度」类选项
• 可在浏览器打印设置中关闭页眉页脚，避免默认元素挤占表格可用高度

内容的提问来源于stack exchange，提问作者Rob S.