本文介绍通过 css 媒体查询精准控制打印样式，强制表格内容自动换行、收缩适配页面宽度，从而在 pdf 导出等打印场景中彻底消除水平滚动条及内容截断问题。
在响应式网页开发中，HTML 表格（尤其是列数较多的 Vuetify <v-table>）在小屏幕下保留水平滚动条是合理的设计；但在打印（@media print）场景下，水平滚动条不仅不可用，还会导致右侧内容被截断、无法生成完整 PDF —— 这是开发者常遇到的典型“打印失真”问题。
关键误区在于：仅对容器设置 overflow-x: hidden（如 <div style="overflow-x: hidden">）无法解决打印时的内容溢出。因为 overflow 属性在打印媒体中默认被忽略，且它不改变内容本身的尺寸或换行行为，只会隐藏溢出区域，造成视觉丢失。
✅ 正确解法是 利用 @media print 主动重置布局逻辑，核心策略包括三步：
- 禁用强制横向溢出：确保打印时父容器不限制内容宽度（避免 overflow-x: hidden 干预）；
- 启用内容弹性换行：对 <th> 和 <td> 强制启用文本换行与最小宽度收缩；
- 限制表格整体宽度：让表格主动适应纸张宽度（如 width: 100%），而非依赖浏览器默认撑开。
以下是推荐的完整打印样式方案：
立即学习“前端免费学习笔记（深入）”；
@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 放入 <style> 标签或外部样式表中（无需 JS 干预）；
- 若表格包裹在自定义容器（如 <div class="table-container">）中，请将 .table-container 替换为你的实际父选择器；
- Vuetify 用户注意：Vuetify 的 <v-table> 默认使用 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 中，真正实现“无滚动、无截断、全可见”。
