Center custom data table container column headers in Shiny

Question

I'm following example 2.5 here: https://rstudio.github.io/DT/ to create a custom data table container in shiny. The example seems to work fine on its own. But when I try to run it in a shiny app, the Sepal and Petal headers are not centered. Please help. Thanks.

library(shiny)

runApp(list(
    ui = basicPage(
    h2('Iris Table'),
    DT::dataTableOutput('mytable')
  ),
server = function(input, output) {
    output$mytable = DT::renderDataTable({

  # a custom table container
  sketch = htmltools::withTags(table(
    class = 'display',
    thead(
      tr(
        th(rowspan = 2, 'Species'),
        th(colspan = 2, 'Sepal'),
        th(colspan = 2, 'Petal')
      ),
      tr(
        lapply(rep(c('Length', 'Width'), 2), th)
      )
    )
  ))

  DT::datatable(iris[1:20, c(5, 1:4)], container = sketch, rownames = FALSE)

  })
}
))

Answer 1

before the:

rowspan=2

add this:

class = 'dt-center'

Answer 2

In your UI, add this tag:

runApp(list(
    ui = basicPage(
        tags$head(
            tags$style(type = "text/css",
               HTML("th { text-align: center; }")
            )
        ),
    h2('Iris Table'),
    DT::dataTableOutput('mytable')
    )