本文介绍通过 css 媒体查询（@media print）精准控制表格在打印场景下的布局行为，解决因内容过宽导致的截断或水平滚动问题，确保 pdf 导出时数据完整、自动换行、无丢失。
在网页中渲染多列表格（尤其是使用 vuetify 等组件库时）时，小屏幕下启用水平滚动条是合理交互；但在「打印模式」（如浏览器 Ctrl+P 或生成 pdf）下，水平滚动条不仅无效，还会导致右侧内容被裁剪——因为打印输出默认只渲染可视区域，overflow-x: hidden 无法强制内容自适应缩放或换行。
关键误区在于：单纯对容器设置 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; } }
? 使用方式：
立即学习“前端免费学习笔记（深入）”；
- 给表格外层容器添加明确类名（如
），避免污染全局 body；
- 在打印前，可通过 js 动态添加该类（例如点击「打印」按钮时）；
- 若使用 Vuetify，建议配合 v-table 的 class 属性或 scoped style 精准作用域。
⚠️ 注意事项：
- 不要依赖 overflow-x: hidden 解决打印截断——它对打印预览无效；
- table-layout: auto 是核心：它让浏览器根据内容动态分配列宽，而非按 fixed 模式均分或按首行定宽；
- word-break: break-word + white-space: normal 确保长文本（如 URL、ID）自动折行，而非溢出；
- 打印样式需置于
- 测试时务必使用浏览器「打印预览」（而非仅看页面样式），不同浏览器（chrome/firefox/edge）对 @media print 的支持略有差异。
? 进阶提示：若需更高精度控制（如强制每页显示固定行数），可结合 page-break-inside: avoid 和 @page 规则进一步优化分页行为。但对绝大多数场景，上述方案已能可靠消除水平截断，实现紧凑、完整、可打印的表格输出。