Rmarkdown 重叠输出

Question

我报告了一个问题 https://github.com/rstudio/rmarkdown/issues/967，我想知道是否有解决方法（如何使它起作用）？

下面的可重现示例（改变 n 和 nGroup 以查看效果 - 当 n = 100 和 nGroup=10 时没有重叠）：

---
title: "Test links to sections in DT"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo=FALSE)
knitr::opts_chunk$set(message=FALSE)
knitr::opts_chunk$set(warning=FALSE)

## DT Test

```{r echo=FALSE}
library(DT)

n <- 1000
nGroup <- 100

testDF <- data.frame(text=paste0("Section", 1:n),
                     number=1:n,
                     group=rep(1:(n/nGroup), n/nGroup))

datatable(head(testDF), caption="Whole table", rownames=FALSE, escape=FALSE, options=list(paging=FALSE, info=FALSE))

getDT<-function(x) {
  a <- list()
  a[[1]] <- htmltools::tags$h3("test1")
  a[[2]] <- datatable(x[, c("text", "number")], caption=htmltools::tags$caption(style="caption-side: top; text-align: left;", "Group: ", htmltools::strong(x$group)), rownames=FALSE, escape=FALSE, filter=c("none"), options=list(paging=FALSE, info=FALSE))
  a[[3]] <- htmltools::tags$h4("test1")

  return(a)
}

res <- lapply(split(testDF, testDF$group), getDT)

htmltools::tagList(res)
```

Answer 1

查看您的示例生成的 HTML，我看到一堆 div 标签，如下所示：

<div class="datatables html-widget html-widget-static-bound"
     id="htmlwidget-3efe8ca4aa087193f03e"
     style="width:960px;height:500px;">

注意将高度设置为 500 像素的内联样式。但是，div 中的内容比 500 像素高得多，因此溢出了 div 的边界。

我不确定 500px 的来源，但作为解决方法，您可以使用不同的样式覆盖它。例如，将此添加到 RMarkdown 的顶部（在 header 之后）：

<style type="text/css">
    div.datatables { height: auto !important;}
</style>

或者，如果您希望使用 CSS 保持 RMarkdown 的整洁，请将

div.datatables {
    height: auto !important;
}

在一个单独的 CSS 文件中，并 link 在 RMarkdown header 中，像这样：

---
title: "Test links to sections in DT"
output:
  html_document:
    css: overlap_workaround.css
---

Rmarkdown 重叠输出

Rmarkdown overlapping output

r

r-markdown

dt

htmlwidgets