R Shiny中Kable表格HTML行悬停颜色修改异常求助

问题根源在于kable_material(c("striped", "hover"))自带的CSS样式优先级更高，且表格主体（tbody）的<td>元素默认设置了背景色，导致你直接编写的tr:hover样式被覆盖，仅表头（thead）的行能生效。

解决方法 #

直接针对表格tbody内的td元素设置悬停样式，并通过!important强制覆盖默认样式：

修改你的Rmd文件中的<style>部分为：

/* 表格主体行悬停变色 */
.table > tbody > tr:hover > td {
  background-color: coral !important;
}

/* 可选：同步修改表头行的悬停颜色 */
.table > thead > tr:hover > th {
  background-color: coral !important;
}

完整示例代码 #

---
title: "Demand"
author:
  - name: myname
date: "`r format(Sys.time(), '%d/%m/%y')`"
output: 
 html_document
params:
  inputdata: NULL
---

<style>
.table > tbody > tr:hover > td {
  background-color: coral !important;
}
.table > thead > tr:hover > th {
  background-color: coral !important;
}
</style>

`r params$inputdata %>%  kbl() %>%  kable_material(c("striped", "hover")) `

原理说明 #

• kable_material生成的表格自带.table类，通过精准的CSS选择器定位到tbody内tr:hover下的td，确保样式作用到目标元素
• !important强制覆盖KableExtra自带的hover样式，避免被默认样式的优先级压制
• 若不需要表头悬停变色，可删除针对thead的CSS规则

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