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

【问题标题】：How to print an HTML table that perfectly fit A4 sheet如何打印完全适合 A4 纸的 HTML 表格
【发布时间】：2019-06-07 11:49:53
【问题描述】：

我有一个带有大桌子的简单 html 页面。我想打印，使其与 A4 纸的宽度和高度完美匹配。它是横向的。

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

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

这是我的代码：

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

【问题讨论】：

可能重复：stackoverflow.com/questions/37196261/…

标签： html css pdf printing html-table

【解决方案1】：

尝试为

添加媒体查询

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

【讨论】：