打印页面时浏览器 Firefox 和 Chrome 出现问题？答案

【问题标题】：problem with browsers Firefox and Chrome when printing a page?打印页面时浏览器 Firefox 和 Chrome 出现问题？
【发布时间】：2022-01-20 23:01:42
【问题描述】：

当我想打印具有固定高度 500px 的表格的页面时，我遇到了来自 Firefox 和 Chrome 等浏览器的奇怪行为，有时浏览器会删除高度完全（Chrome）有时它保持高度但删除边框（Firefox）！

html,body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 1rem;
}
main{
    margin: 10px;
    padding: 10px;
}
table{
    border-collapse: collapse !important;
    border: 1px solid !important;
    width: 100%;
}
tr,th,td{
    border: 1px solid !important;
    padding: 3px;
}
.minHeight{
    height: 500px !important;
}
@media print {
    table {
        border: 1px solid !important;
    }
    th, td {
        border: 1px solid !important;
    }
    
    .minHeight{
        height: 500px !important;
    }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <main>
      <table>
        <thead>
          <tr>
            <th>Code Article</th>
            <th>Code TVA</th>
            <th>Remise</th>
          </tr>
        </thead>
        <tbody class="minHeight">
          <tr>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </main>
  </body>
</html>

有人知道为什么以及如何发生这种情况吗？

【问题讨论】：

标签： html css printing height border

【解决方案1】：

是的，我解决了！在挣扎了大约两个小时后，我发现了两个不错的技巧，一个是在 Chrome 上解决问题：或者只是在 <tbody class="minHeight" style="height: 720px">

处指定高度

table {
    display: table;
    table-layout: fixed;
}
td {
    display: table-cell;
}

关于 Firefox 我发现这是一个 bug 我通过提供 table 属性 cellspacing="0" 来解决它CSS风格border-collapse:initial;

【讨论】：