如何实现表格行hover时在其下方展示全宽详情内容？

实现方案 #

问题根源 #

你之前的实现将详情内容放在首列单元格内部，受限于单元格宽度无法跨列展示，同时HTML存在语法错误（td标签上写了无效的div属性）。最优方案是通过新增跨列详情行实现需求，无需JS，兼容性强。

1. 调整HTML结构 #

给每个数据行后新增独立的详情行，用colspan属性占满表格所有列：

<table class="table">
  <thead>
    <tr>
      <th>Airport</th>
      <th width="150px">Value</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据行 -->
    <tr class="data-row">
      <td>JFK</td>
      <td>234</td>
    </tr>
    <!-- 对应详情行，colspan值和表格列数保持一致 -->
    <tr class="action-row">
      <td colspan="2">
        flight leaves on 13:20<br>
        Take the train from ABC
      </td>
    </tr>
    <tr class="data-row">
      <td>LAX</td>
      <td>104</td>
    </tr>
    <tr class="action-row">
      <td colspan="2">
        <!-- LAX对应的详情内容 -->
      </td>
    </tr>
  </tbody>
</table>

2. 调整CSS样式 #

/* 默认隐藏所有详情行 */
.action-row {
  display: none;
}
/* 自定义详情行样式，可按需调整 */
.action-row td {
  padding: 8px 12px;
  background-color: #f8f9fa;
}
/* hover数据行时，显示相邻的下一个详情行 */
.data-row:hover + .action-row {
  display: table-row;
}
/* 可选：hover详情行自身时保持显示，避免鼠标移到详情区域就消失 */
.action-row:hover {
  display: table-row;
}

实现说明 #

• 用display: table-row渲染详情行，符合表格原生渲染规则，不会破坏原有表格的自适应布局
• colspan属性保证详情内容占满整行宽度，不会出现偏移、宽度不足的问题
• 纯CSS实现无额外性能开销，兼容所有主流浏览器

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