如何实现Bootstrap表格鼠标悬停时仅高亮单个单元格而非整行

Bootstrap原生的table-hover类仅支持整行悬停高亮，要实现单个单元格的悬停效果，用自定义CSS即可实现，不需要额外引入JS脚本：

• 第一步：给目标表格添加自定义类名table-cell-hover，避免全局样式污染
• 第二步：添加以下CSS规则，如果之前已经使用了table-hover类，需要先重置整行悬停的默认样式：

/* 重置table-hover的整行高亮效果（如果使用了该类才需要加这段） */
.table.table-hover tbody tr:hover > * {
  background-color: transparent;
}

/* 自定义单元格悬停高亮样式 */
.table.table-cell-hover :is(td, th):hover {
  /* 直接使用Bootstrap内置的悬停背景色变量，适配主题风格 */
  background-color: var(--bs-table-hover-bg);
  /* 也可以自定义颜色，比如 background-color: #e9ecef; */
}

• 第三步：HTML中使用示例：

<table class="table table-cell-hover">
  <thead>
    <tr>
      <th>序号</th>
      <th>名称</th>
      <th>数值</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>测试项1</td>
      <td>100</td>
    </tr>
    <tr>
      <td>2</td>
      <td>测试项2</td>
      <td>200</td>
    </tr>
  </tbody>
</table>

注意事项 #

• 如果表格同时使用了table-striped斑马纹样式，若发现自定义hover样式被覆盖，可以给background-color属性添加!important提升优先级，或者提高CSS选择器的优先级。
• 如果你使用的是Bootstrap 3及以下版本，没有内置的--bs-table-hover-bg变量，直接替换为自定义的颜色值即可。

内容的提问来源于stack exchange，提问作者Raja Nagendra Kumar