DT datatable selected row color: inconsistent beha

问题:

I have an app, similar to below, which I'd like to customize the color of the selected row rendered via DT. My app code looks like below

library(shiny)
library(DT)

bkg_shade <-"#2c3e50" 

ui <- fluidPage(
  tags$style(HTML(paste0("table.dataTable tr.selected td, table.dataTable td.selected{background-color: ",
                        bkg_shade," !important;}"))),
  fluidRow(dataTableOutput("tbl"))
)
server <- function(input, output){
  output$tbl <- renderDataTable({
    datatable(mtcars)
  })

}

app <- shinyApp(ui = ui, server= server)
runApp(app)

It looks as expected on chrome, the selected row color is what I specified.

However, the selected row color is still the default color in IE.

Have anyone has experienced similar issue before? and how can I fix this so that the selected row color is also customized in IE?

回答1:

I had a very similar problem with my code and had nearly given up hope of finding a solution. However, a small tweak seems to fix it.

You'll notice the only real change is that tbody is inserted. You should be able to keep everything else as it is.

library(shiny)
library(DT)

bkg_shade <-"#2c3e50" 

ui <- fluidPage(
  tags$style(HTML(paste0("table.dataTable tbody tr.selected td, table.dataTable td.selected{background-color: ", bkg_shade," !important;}"))),
  fluidRow(dataTableOutput("tbl"))
)
server <- function(input, output){
  output$tbl <- renderDataTable({
    datatable(mtcars)
  })

}

app <- shinyApp(ui = ui, server= server)
runApp(app)