Search code examples
htmlcssprintingheightborder

problem with browsers Firefox and Chrome when printing a page?


I've faced a weird behavior from browsers like Firefox & Chrome when I want to print a page where there is a table with a fixed height 500px sometimes browser remove the height completely (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>

Does anybody have an idea Why and How this happen?


Solution

  • Yes I solved it! After struggling for about two hours I discover two nice tricks one for fixing problems at Chrome: or just specify height at <tbody class="minHeight" style="height: 720px">

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

    And about Firefox I found out that it's a bug I solve it by giving table attribute cellspacing="0" and in CSS style border-collapse:initial;