如何解决Bootstrap表格在打印预览时样式丢失问题_编写CSS媒体查询@print-css教程-PHP中文网

打印预览时bootstrap表格样式失效，因浏览器@media print默认禁用背景、边框等样式；须显式添加含!important的打印专用css，覆盖border、background-color、padding等，并用page-break-inside: avoid防止行跨页。

如何解决bootstrap表格在打印预览时样式丢失问题_编写css媒体查询@print

打印预览时 Bootstrap 表格边框、条纹、间距全没了

直接用浏览器打印（Ctrl+P）时，Bootstrap 的 .table、.table-striped、.table-bordered 等类几乎全部失效——不是 JS 问题，是浏览器默认在 @media print 下禁用大部分 CSS 样式，包括背景色、边框、自定义字体等。你看到的“白纸黑字”是浏览器的打印样式表（user agent stylesheet）接管了渲染。

必须显式覆盖 `@media print` 中的重置规则

Bootstrap 自带的 CSS 文件（如 bootstrap.min.css）里确实包含部分 @media print 规则，但它们只处理基础语义（比如隐藏 .d-none），**完全不保证表格视觉还原**。你需要自己补全关键样式，且必须加 !important —— 因为浏览器打印样式表的 specificity 很高，普通声明会被无视。

至少要强制恢复：border、background-color、padding、font-size
.table-striped > tbody > tr:nth-of-type(odd) 这类选择器在打印时不会自动生效，得单独写一遍
避免用 box-shadow、transitions、gradients —— 打印机不认这些

最小可用打印样式片段（直接贴进你的 CSS）

这段代码能立刻让 .table 在打印预览中看起来像屏幕一样：

@media print {
  .table {
    border-collapse: collapse !important;
    width: 100% !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;
  }
  /* 防止分页时行被截断 */
  .table tr {
    page-break-inside: avoid !important;
  }
}

注意：page-break-inside: avoid 是防止某一行跨页撕裂的关键，否则打印出来可能第一行在上一页末尾，剩下三列在下一页开头。