Stampa il colore di sfondo della tabella HTML con Bootstrap

Se utilizzo la classe Bootstrap table su una tabella, l'anteprima di stampa non mostra il colore di sfondo per tr.Stampa il colore di sfondo della tabella HTML con Bootstrap

Il mio codice

<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>

Sullo schermo, tutto è rosso, ma su di anteprima di stampa solo l'elemento div è rosso.

Se rimuovo la classe table, tutto funziona (tranne che ho bisogno dello stile tabella).

La mia configurazione: IE11 e Windows 7.

C'è un trucco per stampare il colore di sfondo?

Nota: Il duplicato indicato (CSS @media print issues with background-color;) non è il problema qui, le mie impostazioni sono selezionate per stampare i colori di sfondo. Inoltre, posso stampare il colore per diversi altri elementi.

Risposta:

Grazie ai commenti @Ted, ho overrided td stile per table classe:

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

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

fonte

2015-04-10 JTE

impostazioni Il mio IE per la stampa di fondo sono già controllati. – JTE

Bootstrap imposta in modo esplicito lo sfondo su bianco per la stampa, questo è nel loro CSS: '@media print { .table td, .table th { background-color: #fff! Important; } } '. Scrivi il tuo override come il loro. – Ted

Ok, non posso rispondere alla mia domanda ora ... Ma @Ted funziona! Ho ignorato '' tr'' ma non pensavo per '' td''. Grazie !!! Ho aggiunto '' .table td {background-color: transparent! Important; } '' nella sezione '' stampa''. – JTE

Bootstrap imposta in modo esplicito lo sfondo bianco per la stampa - questo è nel loro CSS:

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

Scrivi la sostituzione come la loro e si dovrebbe essere a posto.

fonte

2015-04-10 15:31:10 Ted

Quindi la risposta migliore è modificare il file di bootstrap e rimuovere il file! Important (everwhere! - dovrebbe essere utilizzato solo se necessario - no per 'gee se segui il mio stile quindi cambiarlo per qualsiasi motivo è brutto, quindi ti costringerò a usare! importante ovunque!) - Oppure l'opzione 2, usa! importantissimo in tutto il tuo codice per sovrascrivere il loro uso eccessivo di !Importante? C'è un semplice file che non posso includere per ottenere questo o devo davvero hackerarlo? –

Sto cercando di ottenere una pagina da stampare come un modulo che sto duplicando, quindi mi piacerebbe semplicemente essere in grado di visualizzare sullo schermo ciò che sta per stampare. Le div non bianche, le tabelle non bianche, le immagini mostrano con lo sfondo che ho impostato nel Div. E non è necessario modificare tutto e inserire 500! Importanti e sovrascrivere tutto per la stampa! –

Non c'è. Di default non stampano. Si tratta di un'opzione del browser che non può essere superato con CSS/JS ecc

c'è questo, che costringono i colori ... presumibilmente in Chrome

-webkit-print-color-adjust

che viene indicato come il supporto BUGGY SOLO per Chrome, e non supportato in altri browser.

fonte

2015-04-10 14:09:47

Ma l'elemento '' div'' sta stampando bene. E se rimuovo '' class = "table" '', la mia tabella sta stampando bene. C'è un problema solo se uso '' class = "table" ''. – JTE

Non riesco a utilizzare Chrome, la mia pagina viene visualizzata nel componente WebBrowser di WPF che utilizza IE – JTE

ho usato un tavolo esima riga di intestazione e designato come questo

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

fonte

2017-10-16 16:28:55 tfa

Credo che il modo migliore è quello di utilizzare in modo più preciso selettore CSS

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

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

fonte

2018-02-01 09:37:38 pszafer

Stampa il colore di sfondo della tabella HTML con Bootstrap

risposta

Problemi correlati