Using RMarkdown to incorporate custom CSS styling in your documents

Having some trouble with my HTML report created from RMarkdown and applying CSS. The browser version displays correctly, but when printed, the styling doesn't come through. Below is an example of the RMarkdown code:

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

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

This is the content of my test.css file:

     .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;
    }

I'm struggling to achieve consistent results between browser output and printed output. I've even tried toggling the background graphics option in Chrome's printing menu, but nothing seems to make a difference. Any suggestions on how to resolve this issue would be greatly appreciated.

Answer №1

It seems that the issue is linked to the "background-color" and "background-image" properties, which are commonly ignored by default on various browsers when it comes to printing.

To address this in Chrome, you can include the following code in your print CSS file. For Firefox and IE, make sure to select "print background" in the print dialog.

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

You can implement this in HTML as follows:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Where to position a button in the middle of a div that varies in size

I'm currently working with this code snippet: <div class="outer"> <ul class="list"> <li class="inner"> <div class="line">information1</div> <div class="line">hyperlink1</div&g ...

The background image does not appear to be displaying correctly on GitHub pages

I've encountered an issue where my svgs are not displaying as background-image or background on GitHub pages, even though they work fine locally. I utilized sass as a preprocessor for css, in case that detail is helpful. If anyone has insights on how ...

What is the best way to prevent users from clearing the value attribute of an input element?

Sample Scenario: While a user is entering information into a field, I would like to restrict the ability to delete or clear out the value, such as keeping "Friend" intact. Can this be accomplished using CSS or JavaScript? ...

Creating input fields similar to the Mail app on OSX

Is there a way to create input fields similar to those in the Mail App on OSX? Take a look at this screenshot - I'm looking to group text as shown in the image above. Instead of having multiple individual input fields (e.g. like in the mail app for ...

Customize your QTabBar icons with Qt Stylesheet: Adjusting the icon mode

I am currently working on customizing a QTabBar with a stylesheet in my tool. I use QIcon to create icons for the tabs, allowing me to set different modes such as normal, disabled, and selected. The challenge I am facing is trying to apply a global stylesh ...

Is there a way to refresh CSS styles when the window width is adjusted?

Is there a way to refresh CSS styles when the window width changes? I attempted this method, but unfortunately it did not work as expected. A simple refresh (F5) helps to rectify the CSS tags. jQuery(function($){ var windowWidth = $(window).width(); ...

Generate information about the past

To process historical data, I am required to manipulate the date range from a specified start date to a fixed end date (04-30-2020). The starting date varies depending on the user, whereas the end date remains constant for all users. data <- read.table( ...

Excessive CPU/GPU usage caused by CSS transition animations

I am currently working on a small element on my website that involves a random size change in one of the DOM elements. const theDiv = document.getElementById("the-div"); function animate(){ const value = Math.floor(Math.random() * 200); theDiv.sty ...

The toggle checkbox feature in AngularJS seems to be malfunctioning as it is constantly stuck in the "off"

I am trying to display the on and off status based on a scope variable. However, it always shows as off, even when it should be on or checked. In the console window, it shows as checked, but on the toggle button it displays as off Here is the HTML code: ...

Why doesn't the z-index of child elements function properly when their fixed parents share the same z-index value?

I have utilized jsfiddle to replicate my problem. My goal is to position .top .inside above .bottom .inside. I am aware that z-index only functions within its respective position type, for example fixed and absolute do not share the same z-index level. How ...

the neighboring div sliding to the left causing the div not to expand with its content

I am trying to create a website similar to this one. When I click on the arrow, the left div collapses and the right one expands. However, the content of the right div does not expand as expected! Below is my HTML code: <div class="tools-bg"> & ...

"When you hover over an element, extra information will pop up that only pertains to that specific element and will not impact any surrounding

As I dive into the world of HTML and CSS, I've come across a hurdle when it comes to hovering over divs and displaying hidden elements. The goal is for the card to change color on hover (which I've achieved), expand in size, and reveal hidden con ...

Unfortunately, the header and footer are not lining up correctly with the main body on our mobile site

I've been tasked with creating a fully responsive website, but I'm encountering difficulties with the mobile design. Specifically, when I switch to mobile dimensions like an iPhone 12, the header and footer don't line up properly with the ma ...

Tips on utilizing multiple dynamically generated toggle switches efficiently

As a Frontend beginner, I am working on implementing toggle switches using HTML, CSS, and Vanilla JavaScript. Approach: I am generating an HTML table with multiple rows based on the data from my Django database. Each row contains details like name, id, a ...

Issues with Bootstrap's hamburger menu not functioning properly when clicked

Can't seem to get my hamburger button working. I've followed the bootstrap documentation and ensured that Bootstrap and jQuery are in the correct order, but still no luck. Any suggestions on what could be causing this issue? Are my links misplace ...

Creating a full-width menu with Material UI - a step-by-step guide

I am currently working on creating a mobile menu that spans the full width of the screen. Despite my efforts, it seems like I might be misunderstanding something as my CSS rules are not being applied correctly. Here is a live code example for reference: ...

bootstrap navigation bar collapsible menu

Struggling with making the hamburger menu appear on my friend's site. Spent hours trying to troubleshoot, but still can't figure out why it's only showing up as a red box and appearing on larger screens instead of just smaller devices. Frust ...

Is there a way to display the background when the popover is visible and hide it when the popover is hidden?

How do I make the backdrop appear when the popover is displayed, and disappear when the popover is closed? $(function(){ var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now ...

The iPhone display scaling issue is causing difficulty viewing the entire website

Currently experiencing difficulties with a page that lacks sufficient content, resulting in a smaller height. As a result, the iPhone is scaling the page and cutting off the full menu bar (960px wide). I attempted to set a minimum height using a media quer ...

Responsive Design and the Importance of Setting Min-Width in Bootstrap 3

After doing some research on Stack Overflow about defining a minimum width for a responsive layout in Bootstrap3, I encountered conflicting answers related to "media queries." My goal is to make my layout responsive up to a certain point. Once it reaches, ...