Question

我有一个带大桌子的简单html页面。我想进行打印，使其完全适合A4纸中的宽度和高度。在风景中。

当我尝试打印时，似乎会自动调整宽度，但不会自动调整高度，每次打印时都会出现白页。

另外，当我增大字体大小时，单元格的高度也会发生变化……如何避免这种情况？（例如overflow：隐藏宽度）

这是我的代码：

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

Answer 1

尝试同时添加媒体查询

@media screen and (max-width: ) {}
@media screen and (max-height: ){}

如何打印完全适合A4表格的HTML表格

1 个答案: