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?
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;