Не выводит стили на печать

111
17 февраля 2021, 05:30

Использую bootstrap. На некоторых строках таблицы есть определённый стиль.

При выводе на печать таблицы, цвет строки пропадает. Видел много решений данной проблемы, но ничего не сработало. Где-то что-то я делаю не правильно. Подскажите как подправить код. Пробую в хроме.

пример на jsfiddle

Код JS:

function Print() {          
   window.print(); 
}

CSS:

@page {
   size: landscape;
}
@media print {
* {
  -webkit-print-color-adjust: exact;
  }
  .noPrintable {
    display: none;
  }
}
Answer 1

Разобрался с проблемой. Помогло переопределение классов стилей bootstrap. (Надеюсь верная формулировка)

В моём случае это класс table-warning. Решение для него следующее:

.table-warning, .table-warning > td, .table-warning > th {
  background-color: #ffeeba !important;
      -webkit-print-color-adjust: exact;
}

Я сначала пробовал только с одним table-warning, но это результата не дало, нужно указывать полный путь. И узнать код цвета.

Если кому интересно, то вот пример кода.

READ ALSO
Поиск элемента по дереву в iframe

Поиск элемента по дереву в iframe

Нужно в iframe найти найти блок по классу и удалить егоКак это реализовать на чистом js?

82
Преобразовать строки в ссылки

Преобразовать строки в ссылки

Всем приветЕсть текстовый файл:

104
Как правильно задать центр вращения для анимации SVG элемента?

Как правильно задать центр вращения для анимации SVG элемента?

Есть rect, которому нужно задать анимацию поворота "туда-обратно", неважно через CSS-анимации или через SMIL, анимация всё равно простаяНо возникает...

130
ul>li>a padding top/bottom

ul>li>a padding top/bottom

Пытался задать padding ссылке в списке, но работает только правый и левыйВерхний и нижний тоже задаётся, но ссылка не растягивает при этом высоту...

109