如何用DT::datatable的formatStyle实现hover嵌套CSS样式？

你遇到的问题是因为DT的formatStyle中hover参数对text-decoration样式的支持有限，或者被内部样式优先级覆盖。以下两种方法可以解决：

方法一：使用JavaScript回调 #

通过datatable的callback参数，手动监听鼠标进出事件来设置样式：

library(DT)

# 假设你的数据框是df，目标列名为"colname"
datatable(df,
          callback = JS("
            // 监听鼠标进入事件
            table.on('mouseenter', 'td.colname', function() {
              $(this).css('text-decoration', 'underline');
            });
            // 监听鼠标离开事件，恢复样式
            table.on('mouseleave', 'td.colname', function() {
              $(this).css('text-decoration', 'none');
            });
          "),
          options = list(
            # 给目标列添加自定义类名，方便JS选择
            columnDefs = list(list(targets = which(colnames(df) == "colname"), className = "colname"))
          ),
          # 同时设置cursor样式
          style = "cursor: pointer;"
)

方法二：注入自定义CSS #

直接添加全局CSS样式，强制覆盖内部样式，这种方法更简洁：

library(DT)
library(htmltools)

# 定义自定义CSS
custom_css <- tags$style(HTML("
  .datatable td.colname:hover {
    text-decoration: underline !important;
    cursor: pointer;
  }
"))

# 创建表格并绑定自定义类名
dt_table <- datatable(df,
                      options = list(
                        columnDefs = list(list(targets = which(colnames(df) == "colname"), className = "colname"))
                      ))

# 合并CSS和表格输出
tagList(custom_css, dt_table)

说明 #

两种方法都需要给目标列添加自定义类名（colname），这样能精准定位到需要设置样式的单元格。其中CSS方法的!important是为了确保样式优先级高于DT的内部默认样式，保证hover下划线生效。

内容的提问来源于stack exchange，提问作者Avraam