Including markdown tables in Shiny app seems to break CSS

问题

I'm trying to include a table created in Rmarkdown in a tab of a Shiny app. For some reason, although the markdown looks just fine when knitted to HTML and viewed on its own, the table CSS doesn't work when it's inserted into Shiny as markdown or HTML.

How it should look/how it looks on its own (ie when testdoc.md below is previewed as HTML, or when testdoc.Rmd is knitted to HTML):

How it looks in Shiny, first using shiny::includeMarkdown, second using shiny::includeHTML

You can see that, in the Shiny app, the CSS is broken in the first table and somewhat broken in the second (bad alignment). I would strongly prefer to use includeMarkdown instead of includeHTML, because for some reason includeHTML causes other problems in my app, including somehow preventing the Javascript that allows sliders and select boxes to work and cancelling out my custom CSS for tabs.

You may ask: why are you using markdown at all? Why not just include a table in shiny using renderTable? Well, this particular tab is a documentation tab, with lots of text and multiple tables, and was created long ago for different purposes. There are also other markdown docs that will eventually be included. It would be nice to be able to insert them into the Shiny app without having to recreate them or split them up to allow for Shiny tables.

This may be an easy fix, I don't know much about CSS.

MRE below.

app.R:

library(shiny)

server <- function(input,output){

}
ui <- fluidPage(titlePanel("Test page"),
  includeMarkdown("testdoc.md"),
  includeHTML("testdoc.html")
)

shinyApp(ui=ui,server=server)

testdoc.Rmd:

Test:

```{r table1, echo=FALSE}
table1 <- matrix(c(-1,0,1,.391,.144,.059,.720,.425,.230,.945,.878,.796,1,1,1),nrow=3)
colnames(table1) <- c("Response","1","2 or less","3 or less","4 or less")
kable(table1,caption="Table 1")
```

testdoc.md (ie. the result of knitr::knit('testdoc.Rmd')):

Test:


| Response|     1| 2 or less| 3 or less| 4 or less|
|--------:|-----:|---------:|---------:|---------:|
|       -1| 0.391|     0.720|     0.945|         1|
|        0| 0.144|     0.425|     0.878|         1|
|        1| 0.059|     0.230|     0.796|         1|

testdoc.html not included here for length but it's easy to recreate from testdoc.Rmd using knitr.

回答1:

An imperfect workaround is to use iframe like this:

library(shiny)

server <- function(input,output){ }
ui <- fluidPage(
  tags$iframe(src = 'testdoc.html', # put testdoc.html to /www
              width = '100%', height = '800px', 
              frameborder = 0, scrolling = 'auto')
)

shinyApp(ui=ui,server=server)

来源：https://stackoverflow.com/questions/42422771/including-markdown-tables-in-shiny-app-seems-to-break-css

标签

Shiny

r-markdown