Печать цвета фона таблицы HTML с помощью Bootstrap

Если я использую класс Bootstrap table в таблице, предварительный просмотр печати не отображает цвет фона для tr.

Мой код

<head>
  <!-- All Bootstrap 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 с фоновым цветом;) здесь не проблема, мои настройки для печати цветов фона. Кроме того, я могу напечатать цвет для нескольких других элементов.

Ответ:

Благодаря комментариям @Ted, я переопределил стиль td для класса table:

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

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

Ответы

Ответ 1

Bootstrap явно устанавливает фоновый цвет в белый для печати - это в CSS:

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

Напишите свое переопределение, как и их, и вам должно быть хорошо идти.

Ответ 2

Нет. По умолчанию они не печатаются. Это опция браузера, которая не может быть преодолена с помощью CSS/JS и т.д.

Вот это, которые заставляют цвета... якобы в Chrome

-webkit-print-color-adjust

который указан как поддержка BUGGY ТОЛЬКО для хром и не поддерживается в других браузерах.

Ответ 3

Я использовал строку заголовка таблицы th и ввел ее в стиле

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

Ответ 4

Я думаю, что лучший способ - использовать более специфичный селектор css

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

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