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

2022-03-15 00:00:00 printing border html css height

我遇到过Firefox&；Chrome这样的浏览器的奇怪行为，当我想要打印具有固定高度的表格的页面500px时，浏览器有时会完全删除高度(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>

有人知道为什么会发生这种情况吗？

解决方案

是的，我解决了！在挣扎了大约两个小时后，我发现了两个很好的技巧，一个是用来修复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;

来解决它

相关文章