Bootstrap中如何让table-hover联动关联行与嵌套表格

原生Bootstrap的table-hover类仅会触发父表格行的悬停样式，无法自动联动嵌套表格。要实现关联行与嵌套表格同步触发悬停效果，只需通过自定义CSS扩展样式即可，具体步骤如下：

步骤1：标记包含嵌套表格的父行 #

给父表格中包含嵌套表格的<tr>添加自定义类（比如has-nested-table），方便精准定位：

<tr class="has-nested-table">
  <td colspan="7">
    <!-- 嵌套表格代码 -->
  </td>
</tr>

步骤2：添加自定义CSS样式 #

通过CSS选择器，让父行悬停时，同时给父行本身和嵌套表格的所有行应用hover背景色，与Bootstrap默认的悬停效果保持一致：

/* 继承Bootstrap默认hover背景色，也可直接使用rgba(0,0,0,0.075) */
.table-hover tbody tr.has-nested-table:hover,
.table-hover tbody tr.has-nested-table:hover .table tbody tr {
  background-color: var(--bs-table-hover-bg);
}

/* 可选：优化嵌套表格表头的悬停样式，保持原有色调一致 */
.table-hover tbody tr.has-nested-table:hover .table thead tr {
  background-color: var(--bs-info-bg-subtle);
}

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
  <!-- 先引入Bootstrap官方CSS -->
  <style>
    .table-hover tbody tr.has-nested-table:hover,
    .table-hover tbody tr.has-nested-table:hover .table tbody tr {
      background-color: var(--bs-table-hover-bg);
    }
    .table-hover tbody tr.has-nested-table:hover .table thead tr {
      background-color: var(--bs-info-bg-subtle);
    }
  </style>
</head>
<body>
  <div id="div1" class="table-responsive">
    <table id="parent-table" class="table table-hover table-sm align-middle w-auto">
      <thead class="align-middle">
        <tr style="border-style: inherit; border-color: #000000; background-color: #f6f6f6;">
          <th scope="col" style="text-align: center;">Col1</th>
          <th scope="col" style="text-align: center;">Col2</th>
          <th scope="col" style="text-align: center;">Col3</th>
          <th scope="col" style="text-align: center;">Col4</th>
          <th scope="col" style="text-align: center;">Col5</th>
          <th scope="col" style="text-align: center;">Col6</th>
          <th scope="col" style="text-align: center;">Col7</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="text-align: center;">1a</td>
          <td style="text-align: center;">1b</td>
          <td style="text-align: center;">1c</td>
          <td style="text-align: center;">1d</td>
          <td style="text-align: center;">1e</td>
          <td style="text-align: center;">1f</td>
          <td style="text-align: center;">1g</td>
        </tr>
        <tr>
          <td style="text-align: center;">2a</td>
          <td style="text-align: center;">2b</td>
          <td style="text-align: center;">2c</td>
          <td style="text-align: center;">2d</td>
          <td style="text-align: center;">2e</td>
          <td style="text-align: center;">2f</td>
          <td style="text-align: center;">2g</td>
        </tr>
        <tr class="has-nested-table">
          <td colspan="7">
            <table class="table table-bordered table-striped table-sm align-middle mb-0 w-75" style="margin-left: auto; margin-right: auto;">
              <thead class="align-middle">
                <tr class="bg-info text-white" style="border-style: inherit; border-color: #000000;">
                  <th scope="col" style="text-align: center;">Col1-nested</th>
                  <th scope="col" style="text-align: center;">Col2-nested</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td style="text-align: center;">1a-nested</td>
                  <td style="text-align: center;">1b-nested</td>
                </tr>
                <tr>
                  <td style="text-align: center;">2a-nested</td>
                  <td style="text-align: center;">2b-nested</td>
                </tr>
                <tr>
                  <td style="text-align: center;">3a-nested</td>
                  <td style="text-align: center;">3b-nested</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

效果说明 #

• 当鼠标悬停在带has-nested-table类的父行上时，父行和嵌套表格的所有数据行都会同步显示Bootstrap默认的hover背景色
• 嵌套表格的表头会保持原有背景色调的高亮效果，避免样式冲突

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