I recently learned that it’s possible to use toc_float: true in a Rmd file’s YAML header to create a sticky table of contents that is placed to the left of the Rmd file’s contents. This is great because I am currently dealing with a very long document containing many headers that benefits greatly from this navigation feature.

I noticed, however, that the TOC does not work nicely when main content overflows the default width. A scrollbar appears at the bottom, but when you use it the content will overlap with the table of contents.

In my case I am using a DT::datatable() HTML widget to display a data frame. As the data contains many columns, it is perfectly expected that the table will not fit inside the HTML container. Therefore, my question is not “how do I make my datatable smaller”.

Is there a way to keep all the contents of the Rmd file to the right of the TOC even when scrolling horizontally? I don’t mind if it’s a hacky HTML/CSS solution either.

Below are the code for my example and two screenshots that show the problem. (Note that I wrote “THREE BACKTICKS” as I can’t write them out normally due them being recognized as code regions in stackoverflow’s text editor.) Thanks a lot in advance!

---
title: "rmd floating toc test"
output:
  html_document:
    toc: true
    toc_float: true
---

## level 2 title

bla bla bla


### level 3 title

bla bla bla

THREE BACKTICKS {r, echo=FALSE}
Sys.setenv(LANG="en")
library(tidyr)
DT::datatable(billboard)
THREE BACKTICKS