打印预览中HTML表格行无法适配的问题求助

问题相关截图 #

• HTML文档截图：
• 调用JavaScript print函数后的打印预览截图：

当前使用的CSS代码 #

table {
    width: 100%;
    /* page-break-before: always; */
}
table,th,td {
    border: 1px solid #858585;
    border-collapse: collapse;
}

th {
    background-color: #e78c37;
    color: white;
}

thead {
    margin-left: 2rem;
}

解决方案 #

针对打印预览表格行无法适配的问题，可尝试以下调整：

• 移除thead的margin设置
  thead的margin-left: 2rem会导致表头偏移，破坏表格整体布局，打印时极易出现内容错位，直接删除该样式即可。

• 添加打印专用媒体查询规则
  利用@media print针对打印场景做专属适配，解决内容溢出、跨页截断问题：

  @media print {
      table {
          width: 100% !important;
          page-break-inside: avoid; /* 避免表格被页面强行截断 */
      }
      td, th {
          word-wrap: break-word; /* 长文本自动换行 */
          max-width: 180px; /* 限制单元格最大宽度，防止内容溢出页面 */
          padding: 0.4rem; /* 增加内边距，让内容更宽松 */
      }
      thead {
          display: table-header-group; /* 表格跨页时，每页顶部自动显示表头 */
      }
  }
  

• 优化表格整体布局
  确保表格边框与单元格样式统一，避免因样式冲突导致的排版错乱，保留原有的border-collapse: collapse规则即可。

内容的提问来源于stack exchange，提问作者MD. TAMIM HOSSEN