У меня просто HTML-страница с большой таблицей. Я хотел бы печатать так, чтобы он идеально подходил по ширине и высоте на листе А4. Это в ландшафте.
Когда я пытаюсь распечатать, выглядит так, будто ширина настраивается автоматически, но не высота, и каждый раз, когда я печатаю, появляется белая страница.
Кроме того, когда я увеличиваю размер шрифта, высота ячейки изменяется ... как я могу избежать этого? (как переполнение: скрыто для ширины)
Это мой код:
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="referto.css" />
<title>Referto</title>
</head>
<body>
<page size="A4">
<table>
...
</table>
</page>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0;
}
body {
}
table {
border-collapse: collapse;
table-layout: fixed;
overflow: hidden;
width: 100%;
height: 100%
}
td {
font-size: 2mm;
border-color: red;
text-align: center;
vertical-align: middle;
overflow: auto;
white-space: nowrap;
}
.t1 {border-top: 0.1mm solid}
.b1 {border-bottom: 0.1mm solid}
.l1 {border-left: 0.1mm solid}
.r1 {border-right: 0.1mm solid}
.t2 {border-top: 0.2mm solid}
.b2 {border-bottom: 0.2mm solid}
.l2 {border-left: 0.2mm solid}
.r2 {border-right: 0.2mm solid}
.t3 {border-top: 0.3mm solid}
.b3 {border-bottom: 0.3mm solid}
.l3 {border-left: 0.3mm solid}
.r3 {border-right: 0.3mm solid}
.t4 {border-top: 0.4mm solid}
.b4 {border-bottom: 0.4mm solid}
.l4 {border-left: 0.4mm solid}
.r4 {border-right: 0.4mm solid}
.t5 {border-top: 0.5mm solid}
.b5 {border-bottom: 0.5mm solid}
.l5 {border-left: 0.5mm solid}
.r5 {border-right: 0.5mm solid}
.t6 {border-top: 0.6mm solid}
.b6 {border-bottom: 0.6mm solid}
.l6 {border-left: 0.6mm solid}
.r6 {border-right: 0.6mm solid}
.t7 {border-top: 0.7mm solid}
.b7 {border-bottom: 0.7mm solid}
.l7 {border-left: 0.7mm solid}
.r7 {border-right: 0.7mm solid}
.t8 {border-top: 0.8mm solid}
.b8 {border-bottom: 0.8mm solid}
.l8 {border-left: 0.8mm solid}
.r8 {border-right: 0.8mm solid}
page[size="A4"] {
background: white;
width: 297mm;
height: 210mm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
body, page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}