HTML表格单元格内容过多导致A4打印错乱的解决方案咨询

解决方案 #

你需要补充以下打印专用CSS规则，同时调整现有表格布局配置：

核心修改点

• 为表格启用固定布局，强制长内容自动换行，解决单元格内容过长导致的布局错乱
• 配置打印分页规则，避免表格行/单元格被页面截断，同时实现表头在每一页自动重复
• 适配A4打印宽度，取消容器的横向边距压缩，充分利用打印幅面

修改后的完整CSS

body {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

img {
  width: 20%;
  margin-bottom: 15px;
  margin-left: 70px;
}

.header {
  display: flex;
}

* {
  font-weight: lighter;
  box-sizing: border-box;
}

.container {
  max-width: 70%;
  margin: 0 auto;
}

th {
  padding: 2px 5px;
  border: 1.5px solid black;
  text-align: left;
}

td {
  padding: 2px 5px;
  text-align: left;
  /* 强制内容换行 */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

table {
  border-collapse: collapse;
  /* 固定布局避免内容撑乱表格 */
  table-layout: fixed;
  width: 100%;
}

.padding {
  padding-right: 82px;
}

tr {
  border: 1.5px solid black;
}

td {
  border: 1.5px solid black;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 0;
}

h2 {
  font-weight: lighter;
  font-size: 20px;
  padding: 0;
  color: #2C5197;
}

h1 {
  font-size: 35px;
  font-weight: lighter;
}

.num {
  border: none;
}

.border2 {
  border-bottom: none;
  border-top: none;
  border-left: 1.5px solid black;
}

.border3 {
  border-top: none;
  border-bottom: none;
}

.border3 td {
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
}

.border2 td {
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
}

.border td {
  border-bottom: none;
  border-left: 1.5px solid black;
  border-right: 1.5x solid black;
}

.border td {
  border: none;
}

.border {
  border-bottom: none;
  border-top: none;
}

.border td {
  border-bottom: none;
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
}

.border1 td {
  border: none;
  border-left: 1.5px solid black;
  border-right: 1.5px solid black;
}

.border1 {
  border: none;
  border-right: 1.5px solid black;
  border-left: 1.5px solid black;
}

.border5 {
  border-top: none;
  border-bottom: none;
}

.border5 td {
  border-top: none;
}

p {
  visibility: hidden;
  padding: 0;
  margin: 0;
}

.secondtable {
  margin-top: 80px;
}

.secondtable tbody td {
  text-align: center;
}

@page {
  size: A4 portrait;
  margin-top: 0;
  margin-bottom: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

/* 打印专用规则 */
@media print {
  .container {
    max-width: 100%;
  }
  /* 表头每页重复 */
  thead {
    display: table-header-group;
  }
  /* 避免行、单元格被分页截断 */
  tr, td {
    page-break-inside: avoid;
  }
  /* 可选：如果需要在第二个表格前强制分页可以取消下面一行的注释 */
  /* .secondtable { page-break-before: always; } */
}

效果说明

修改后长内容单元格会自动换行，不会撑破表格布局；表格跨页时表头会自动出现在新页面顶部，行内容不会被从中间截断，适配A4打印幅面。

内容的提问来源于stack exchange，提问作者drinos