使用 Bootstrap 打印 HTML 表格背景颜色答案

【问题标题】：Print HTML table background color with Bootstrap使用 Bootstrap 打印 HTML 表格背景颜色
【发布时间】：2015-06-16 07:08:23
【问题描述】：

如果我在表格上使用 Bootstrap table 类，打印预览不会显示 tr 的背景颜色。

我的代码

<head>
  <!-- All Bootstrap's stuff ... -->

  <!-- My custom style -->
  <style type="text/css">
    @media print {
      .bg-danger {
        background-color: #f2dede !important;
      }
    }
  </style>
</head>
<body>
  <div class="bg-danger">
    <td>DIV</td>
  </div>

  <table class="table">
    <tr class="bg-danger">
      <td>TR 1</td>
    </tr>
    <tr class="danger">
      <td>TR 2</td>
    </tr>
    <tr style="background-color: #f2dede !important;">
      <td>TR 3</td>
    </tr>
  </table>
</body>

在屏幕上，一切都是红色的，但在打印预览中，只有 div 元素是红色的。

如果我删除 table 类，一切正常（除了我需要表格样式）。

我的配置：IE11 和 Windows 7。

打印背景色有什么技巧吗？

注意：指定的重复项 (CSS @media print issues with background-color;) 不是这里的问题，我的设置已检查以打印背景颜色。另外，我可以为几个 other 元素打印颜色。

答案：

感谢@Ted cmets，我为table 类覆盖了td 样式：

<style type="text/css">
  @media print {
    .bg-danger {
      background-color: #f2dede !important;
    }

    .table td {
      background-color: transparent !important;
    }
  }
</style>

【问题讨论】：

我的 IE 打印背景设置已经检查完毕。
Bootstrap 明确将背景设置为白色以进行打印——这在他们的 CSS 中：@media print { .table td, .table th { background-color: #fff !important; } }。像他们一样写下你的覆盖。
好的，我现在无法回答我的问题......但是@Ted 你的解决方案有效！我覆盖了tr，但我没想到td。谢谢！！！我在print 部分添加了.table td { background-color: transparent !important; }。
别担心，很高兴我能帮上忙 :)
@Ted 想要将您的评论转换为答案？重新打开问题:)

标签： html css twitter-bootstrap

【解决方案1】：

Bootstrap 明确地将背景设置为白色以进行打印——这是在他们的 CSS 中：

@media print { 
    .table td, .table th { 
        background-color: #fff !important; 
    } 
}

像他们一样写你的覆盖，你应该很高兴。

【讨论】：

所以最好的答案是编辑引导文件并删除 !important （无论何时何地！ - 它应该只在需要时使用 - 如果你遵循我的风格然后改变它为任何原因很糟糕，所以我要强迫你在任何地方都使用 !important！） - 或者选项 2，在你的代码中使用 !important 来覆盖他们对 !Important 的过度使用？是否有一个我不能包含的简单文件来获取它，或者我真的必须破解它吗？
我试图让一个页面像我正在复制的表单一样打印 - 所以我希望能够在屏幕上简单地查看要打印的内容。 Div 不是白色的，表格不是白色的，图像以我在 Div 中设置的背景显示。并且不必编辑所有内容并放入 500 ！重要并覆盖所有内容以进行打印！

【解决方案2】：

添加到@Ted 的答案，以下将覆盖默认引导background-color !important 规则：

@media print {
    table tr.highlighted > td {
        background-color: yellow !important;
    }
}

【讨论】：

【解决方案3】：

没有。默认情况下，它们不打印。这是 CSS/JS 等无法克服的浏览器选项。

有这个，它强制颜色......据称在 Chrome 中

-webkit-print-color-adjust

这被列为 BUGGY 仅支持 chrome，其他浏览器不支持。

【讨论】：

但是div 元素的打印效果很好。如果我删除class="table"，我的表格打印得很好。仅当我使用 class="table" 时才会出现问题。
我无法使用 Chrome，我的页面显示在使用 IE 的 WPF WebBrowser 组件中

【解决方案4】：

将 table 类替换为 table-print

通过使用此 CSS 代码

.table-print {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

    .table-print thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
    }

    .table-print th, .table-print td {
        padding: 0.75rem;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
    }
 .table-print .thead-dark th {
    color: #fff;
    background-color: #343a40;
    border-color: #454d55;
}

【讨论】：

【解决方案5】：

我使用了第一个表格标题行并将其设置为这样

.table th {
        background-color: #2D3347 !important;
        color: #fff !important
    }

【讨论】：

【解决方案6】：

我认为更好的方法是使用更具体的 css 选择器

<style>
@media print {
   .table td.cell {
     background-color: blue !important;
   }
}
</style>

<table class="table">
  <tr>
    <td class="cell">TR 1</td>
  </tr>
</table>

【讨论】：