打印预览中表格边框和条纹消失，是因浏览器默认禁用background-color、border等样式；需手动添加带!important的四项打印样式并设置tr的page-break-inside: avoid，配合devtools打印模拟调试。
为什么打印预览里表格边框和条纹全没了
不是 Bootstrap 没写打印样式，而是浏览器在 @media print 下默认禁用 background-color、border、box-shadow 等视觉属性——你看到的“白底黑字”是浏览器内置打印样式表接管了渲染。Bootstrap 自带的 bootstrap.min.css 里虽有少量 @media print 规则，但只处理 .d-none 类隐藏逻辑，完全不保证 .table-striped 或 .table-bordered 的视觉还原。
必须手动补全的关键打印样式
光靠 d-print-none 或 data-print-styles 加载 Bootstrap CSS 文件根本不够。你要显式覆盖以下四项，且每条都得加 !important（浏览器打印样式表 specificity 极高，普通声明会被无视）：
.table { border-collapse: collapse !important; }.table th, .table td { border: 1px solid #000 !important; padding: 6px 8px !important; font-size: 12px !important; }.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9 !important; }.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tbody > tr > td { border: 1px solid #000 !important; }
漏掉任意一项，都可能造成边框断裂、条纹消失或单元格间距塌陷。
防止表格行被分页撕裂
打印时某一行跨页，上半行在末页、下半行在下一页，这是最常被忽略的体验断点。关键不是给整个表格加 page-break-inside: avoid（它对 <table> 无效），而是作用于 <code><tr>：
<p><code>@media print { .table tr { page-break-inside: avoid !important; } }
注意：若表格用了 colspan 或 rowspan，部分浏览器仍可能失效；此时需配合 page-break-after: always 在特定行后强制分页。
调试时别依赖真实打印弹窗
反复点 Ctrl+P → 设置打印机 → 调页边距 → 关页眉页脚，纯属低效。Chrome DevTools 里打开 F12 → 右上角 ⋮ → More tools → Rendering → 勾选 Emulate CSS media: print，页面立刻按打印规则重绘，改完 CSS 刷新即见效果。但它不模拟真实分页线，最终验证仍需进真实打印预览，并开启「背景图形」选项——否则你写的 background-color 还是看不见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
