Increase width of entire HTML Rmarkdown output

Question

I am looking to increase the overall width of my HTML Rmarkdown output.

When producing PDF documents from Rmarkdowns there is an option to set the margin in the YAML section of the Rmd (ex. geometry: margin=.5in).

I am looking for something similar for HTML docs. The following link is a good example of my issue: https://rstudio.github.io/DT/extensions.html

As you can see on that html webpage, there is a lot of white space to the left and right of the datatables. Is there a way to reduce this margin space and thus increase the width of the datatables?

Thanks

Answer 1

Put this at the top (but below the YAML) of your rmarkdown document:

<style type="text/css">
.main-container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
}
</style>

Don't put it in a chunk but as plain text. It should set the max-width of the content area to 1800px.

Answer 2

As of rmarkdown 2.10, did get no results with the solutions proposed here or on the linked answer. I could not get it to work with inline css in the .rmd file. It did however work immediately when adding a doc.css file in the .rmd folder with just this entry:

div.main-container {
  max-width: 1600px !important;
}

and adding it to the yaml header like this:

---
title: asd
author: abc
date: "`r format(Sys.time(), '%d %B, %Y')`"
output:
  html_document:
    toc: true
    toc_float: true
    toc_depth: 6
    mathjax: null
    css: doc.css
---

Answer 3

Something else inserts max-width into the html output, so you need to mark the width !important for it to work

<style type="text/css">
.main-container {
  max-width: 100% !important;
  margin: auto;
}
</style>