如何在打印模式下彻底禁用 HTML 表格的水平滚动条

✅ 正确解法是 利用 @media print 主动重置布局逻辑，核心策略包括三步：

1. 禁用强制横向溢出：确保打印时父容器不限制内容宽度（避免 overflow-x: hidden 干预）；
2. 启用内容弹性换行：对 和 强制启用文本换行与最小宽度收缩；
3. 限制表格整体宽度：让表格主动适应纸张宽度（如 width: 100%），而非依赖浏览器默认撑开。

以下是推荐的完整打印样式方案：


百宝箱
百宝箱是支付宝推出的一站式AI原生应用开发平台，无需任何代码基础，只需三步即可完成AI应用的创建与发布。
下载

立即学习“前端免费学习笔记（深入）”；

@media print {
  /* 关键：移除所有可能抑制换行的 overflow 设置 */
  body,
  .table-container,
  table {
    overflow-x: visible !important;
    width: 100% !important;
  }

  /* 强制表头/单元格内容可换行，禁止强制单行显示 */
  th,
  td {
    white-space: normal !important;     /* 允许换行 */
    word-break: break-word !important; /* 长单词/URL 也能折行 */
    padding: 4px 6px !important;       /* 缩小内边距，节省空间 */
    font-size: 10px !important;        /* 可选：微调字号提升密度 */
  }

  /* 可选：为超宽列添加额外约束（如长文本列） */
  td:nth-child(5),
  td:nth-child(8) {
    max-width: 120px;
  }

  /* 防止表格因边框/阴影撑大 */
  table {
    border-collapse: collapse !important;
    box-shadow: none !important;
  }
}

? 使用说明：

• 将上述 CSS 放入
• 若表格包裹在自定义容器（如
  ）中，请将 .table-container 替换为你的实际父选择器；
• Vuetify 用户注意：Vuetify 的 默认使用 display: table，上述规则完全兼容；若使用 v-data-table 等高级组件，建议额外添加 class="print-table" 并在媒体查询中针对性覆盖（如 .print-table th { ... }）。

⚠️ 重要提醒：

• 不要依赖 overflow-x: hidden 解决打印问题 —— 它在 @media print 中无效且会掩盖真实布局缺陷；
• 避免使用 text-nowrap 或 white-space: nowrap 类（Vuetify 中常见），打印前务必通过媒体查询重置；
• 实际 PDF 导出效果受浏览器打印引擎影响（Chrome 最可靠），建议始终在 Chrome 中按 Ctrl+P → “另存为 PDF” 预览验证。

通过以上声明式 CSS 控制，表格将在打印时自动压缩列宽、智能换行，确保全部内容完整呈现于单页 PDF 中，真正实现“无滚动、无截断、全可见”。