RMarkdown: Druck css Stile

Question

Ich erstelle einen HTML-Bericht von RMarkdown mit ein paar einfachen CSS und ich habe einige Probleme beim Drucken von Ausgabe Bericht. Browser-Version gilt korrekt CSS aber gedruckte Version nicht. Dies wäre ein reproduzierbares Beispiel RMarkdown Code sein:

--- 
title: "Table" 
output: 
    html_document: 
    css: "test.css" 
--- 

```{r} 
library(knitr) 
data(iris) 
kable(iris) 
``` 

Und dies ist der Inhalt meiner test.css Datei:

 .main-container { 
    max-width: 1600px !important; 
} 
    tr:nth-child(even) {background-color: #f2f2f2} 
    th { 
     background-color: #FF6319; 
     color: white; 
     font-size: 12px; 
    } 
    tbody { 
     font-size: 12px; 
    } 
    hr { 
     page-break-after: always; 
    } 

Wie kann ich die gleichen Ergebnisse in Browser-Ausgabe erhalten verwalten als in Druckausgabe? Ich habe sogar versucht, die Grafikoptionen im Chrome-Menü zu überprüfen, aber es ändert sich nichts. Danke.

Answer 1

Ich denke, das Problem hängt mit den Eigenschaften "background-color" und "background-image" zusammen, die standardmäßig in vielen Browsern ignoriert werden (beim Drucken).

Für Chrom können Sie den folgenden Code zu Ihrem Druck CSS hinzufügen, in Firefox und IE müssen Sie "Drucken Hintergrund" im Drucken-Dialog auswählen.

:root { 
    -webkit-print-color-adjust: exact; 
} 

Sie können es so machen in HTML:

<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 

@media print { 
    tr:nth-child(even) { 
     background-color: #f2f2f2 !important; 
     -webkit-print-color-adjust: exact; 
    } 
    th { 
     background-color: #FF6319 !important; 
     -webkit-print-color-adjust: exact; 
    } 
}