表格行hover时高亮区域高度小于行高的实现方案咨询

当然可以实现！我之前也碰到过这种设计需求，用CSS伪元素就能完美解决，完全不用依赖会搞乱列间距的border-spacing～

核心思路 #

通过给表格行（tr）添加绝对定位的伪元素，让高亮区域在hover时显示，同时通过top和bottom属性控制它与行上下边缘的间距，既满足高亮效果，又不会影响列之间的布局。

具体实现代码 #

1. 基础HTML结构

<table class="custom-table">
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容单元格1</td>
      <td>内容单元格2</td>
      <td>内容单元格3</td>
    </tr>
    <tr>
      <td>内容单元格4</td>
      <td>内容单元格5</td>
      <td>内容单元格6</td>
    </tr>
  </tbody>
</table>

2. CSS样式实现

/* 表格基础样式：消除列间距干扰 */
.custom-table {
  width: 100%;
  border-collapse: collapse; /* 关键：合并单元格边框，避免默认间距 */
  /* 如果需要表格整体圆角，可以加上下面两行 */
  border-radius: 8px;
  overflow: hidden;
}

/* 单元格样式：留出高亮区域的上下空间 */
.custom-table td, .custom-table th {
  padding: 12px 16px; /* 上下padding要足够大，给高亮区域留出行间距 */
  text-align: left;
  /* 可以添加设计里的白色边框 */
  border: 1px solid #ffffff;
}

/* 行hover高亮核心逻辑 */
.custom-table tr {
  position: relative; /* 让伪元素基于当前行定位 */
}

.custom-table tr:hover::before {
  content: "";
  position: absolute;
  top: 4px; /* 高亮区域距离行顶部的间距，可按需调整 */
  bottom: 4px; /* 高亮区域距离行底部的间距，可按需调整 */
  left: 0;
  right: 0;
  background-color: #f0f7ff; /* 替换成你需要的高亮颜色 */
  z-index: -1; /* 确保文字和单元格边框显示在高亮层上方 */
  border-radius: 6px; /* 可选：给高亮区域添加圆角，匹配设计 */
}

调整说明 #

• 如果你需要更大的上下间距，只需要修改top和bottom的数值即可（比如改成6px）
• 高亮颜色、圆角大小都可以根据你的设计稿直接替换
• 如果表格有表头（thead）的hover需求，同样可以给thead tr应用这套伪元素逻辑

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