CSS/SCSS/bootstrap:: переопределить параметры печати в бутстрапе:: изменить фон: прозрачно! важно для цвета

У меня проблема с загрузкой CSS/print.

В bootstrap CSS (reset.css) все очищается для печати

@media print {
  * {
    text-shadow: none !important;
    color: black !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

Но мне нужно напечатать несколько строк в цвете. Моя таблица выглядит так:

<div class="container">
    <div id="task-summary">
        <div id="process-summary">
            <table class="table table-condensed">
                <tbody>
                    <tr class="success">
                        <td>

Я включил это в свой код, но он не работает:

@media print {

  #task-summary{
    .success{
      background-color: #DFF0D7 !important;
    }
  }
}

Я уже пробовал, если css исключен с помощью дисплея: none.. он работает (строка не отображается) и, кажется, находится в правильном месте.

Есть ли у кого-то идея, как мне удастся переопределить команду bootstrap css, не редактируя reset.css bootstrap?

Ответ 1

У меня была та же проблема. Когда вы печатаете страницу, параметр background-color: ...; не работает в строках таблицы. Измените CSS-селектор на:

@media print {

  #task-summary .success td {
    background-color: #DFF0D7 !important;

    /* add this line for better support in chrome */ 
    -webkit-print-color-adjust:exact;
  }
}

Все должно работать после этого.

Ответ 2

@media print {
    .success {
      background-color: #DFF0D7 !important;
    }    
}

или

@media print {
    #task-summary .success {
      background-color: #DFF0D7 !important;
    }  
}

или

@media print {
    #task-summary > #process-summary .success {
      background-color: #DFF0D7;
    }
}