本文介绍通过 css 媒体查询（@media print）精准控制表格在打印场景下的布局行为，解决因内容过宽导致的截断或水平滚动问题，确保 pdf 导出时数据完整、自动换行、无丢失。
在网页中渲染多列表格（尤其是使用 Vuetify 等组件库时）时，小屏幕下启用水平滚动条是合理交互；但在「打印模式」（如浏览器 Ctrl+P 或生成 PDF）下，水平滚动条不仅无效，还会导致右侧内容被裁剪——因为打印输出默认只渲染可视区域，overflow-x: hidden 无法强制内容自适应缩放或换行。
关键误区在于：单纯对容器设置 overflow-x: hidden（如 <div style="overflow-x:hidden">）仅隐藏滚动条，不改变表格的固有宽度计算逻辑。浏览器仍按所有列总宽度渲染表格，超出页面宽度的部分会被直接截断，而非折行或压缩。
✅ 正确解法是利用 CSS 媒体查询，针对 @media print 环境重置布局规则：
@media print {
/* 关键：重置父容器溢出行为，允许内容自然换行 */
.print-table-container,
.v-table,
table {
overflow-x: visible !important;
width: 100% !important;
table-layout: auto !important; /* 避免 fixed 布局锁定列宽 */
}
/* 强制单元格内容换行，防止长文本撑开表格 */
td, th {
word-break: break-word;
white-space: normal;
padding: 4px 6px !important; /* 缩小内边距，腾出空间 */
font-size: 10px !important; /* 可选：微调字号提升密度 */
}
/* 移除可能影响布局的固定宽度/最小宽度 */
td > *, th > * {
max-width: 100%;
overflow-wrap: break-word;
}
}? 使用方式：
立即学习“前端免费学习笔记（深入）”；
- 给表格外层容器添加明确类名（如 <div class="print-table-container">），避免污染全局 body；
- 在打印前，可通过 JS 动态添加该类（例如点击「打印」按钮时）；
- 若使用 Vuetify，建议配合 v-table 的 class 属性或 scoped style 精准作用域。
⚠️ 注意事项：
- 不要依赖 overflow-x: hidden 解决打印截断——它对打印预览无效；
- table-layout: auto 是核心：它让浏览器根据内容动态分配列宽，而非按 fixed 模式均分或按首行定宽；
- word-break: break-word + white-space: normal 确保长文本（如 URL、ID）自动折行，而非溢出；
- 打印样式需置于 <style> 标签内或独立 CSS 文件中，并确保未被 scoped 或 CSS-in-JS 工具意外剥离；
- 测试时务必使用浏览器「打印预览」（而非仅看页面样式），不同浏览器（Chrome/Firefox/Edge）对 @media print 的支持略有差异。
? 进阶提示：若需更高精度控制（如强制每页显示固定行数），可结合 page-break-inside: avoid 和 @page 规则进一步优化分页行为。但对绝大多数场景，上述方案已能可靠消除水平截断，实现紧凑、完整、可打印的表格输出。
