打印页面时浏览器 Firefox 和 Chrome 有问题？

Question

当我想打印包含 table 的页面时，Firefox 和 Chrome固定高度 500px 有时浏览器会完全移除高度 (Chrome) sometimes it remains the height but removes borders(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>

有人知道为什么会这样吗？

Answer 1

是的，我解决了！在努力了大约两个小时后，我发现了两个很好的技巧，一个是解决 Chrome 的问题：或者只是在 <tbody class="minHeight" style="height: 720px">[=27 指定高度=]

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

关于 Firefox 我发现它是一个 bug 我通过给出 table 属性 cellspacing="0" 和 CSS 风格 border-collapse:initial;

打印页面时浏览器 Firefox 和 Chrome 有问题？

problem with browsers Firefox and Chrome when printing a page?

html

css

printing

height

border