如何为水平溢出的表格边缘添加阴影并兼容行悬停背景？

这个场景我太熟悉了——当表格有水平溢出时，想在边缘加阴影提示用户还有内容，但行的悬停背景色总是把阴影盖住，其实核心就是层级关系的问题。行元素的背景色默认会覆盖表格本身的阴影，所以咱们换个思路，把阴影放在表格的父容器上，就能轻松避开这个冲突。

下面是具体的实现方案，包含HTML、CSS和少量JS：

1. 基础HTML结构 #

先给表格套一个父容器，我们会用这个容器来生成阴影：

<div class="table-container">
  <table class="data-table">
    <thead>
      <tr>
        <th>用户ID</th>
        <th>用户名</th>
        <th>注册时间</th>
        <th>邮箱地址</th>
        <th>手机号码</th>
        <th>会员等级</th>
        <th>最近登录时间</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1001</td>
        <td>AliceSmith</td>
        <td>2023-01-15</td>
        <td>alice@example.com</td>
        <td>138xxxx1234</td>
        <td>VIP3</td>
        <td>2024-05-20</td>
      </tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

2. CSS核心样式 #

关键是利用父容器的伪元素生成阴影，同时通过z-index和pointer-events确保阴影不被行背景覆盖，也不影响交互：

/* 父容器：限制宽度，开启水平滚动，相对定位用于伪元素 */
.table-container {
  position: relative;
  overflow-x: auto;
  max-width: 100%;
  margin: 20px;
}

/* 右侧阴影：默认显示，提示右侧有内容 */
.table-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 100%;
  /* 渐变阴影，从透明到浅灰 */
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(0,0,0,0.12));
  pointer-events: none; /* 让鼠标事件穿透阴影，不影响表格交互 */
  z-index: 1; /* 确保阴影在表格内容之上 */
}

/* 左侧阴影：默认隐藏，滚动到右侧时显示 */
.table-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 100%;
  background: linear-gradient(to left, rgba(255,255,255,0), rgba(0,0,0,0.12));
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease; /* 平滑显示/隐藏 */
}

/* 滚动到左侧有内容时，显示左侧阴影 */
.table-container.scroll-left::before {
  opacity: 1;
}

/* 表格基础样式 */
.data-table {
  width: max-content; /* 让表格宽度适应内容 */
  border-collapse: collapse;
}

.data-table th, .data-table td {
  padding: 10px 15px;
  border: 1px solid #eee;
  white-space: nowrap; /* 禁止换行，确保产生水平溢出 */
}

/* 行悬停背景色：正常设置即可，不会再覆盖阴影 */
.data-table tbody tr:hover {
  background-color: #f8f9fa;
}

3. 少量JS控制左侧阴影显示 #

用JS检测滚动位置，当表格滚动到右侧时，给父容器添加类来显示左侧阴影：

const tableContainer = document.querySelector('.table-container');

tableContainer.addEventListener('scroll', () => {
  // 加个小阈值避免滚动时的抖动
  if (tableContainer.scrollLeft > 10) {
    tableContainer.classList.add('scroll-left');
  } else {
    tableContainer.classList.remove('scroll-left');
  }
});

为什么这个方案能解决问题？ #

• 阴影是父容器的伪元素，层级z-index:1高于表格行的默认层级（0），所以行的悬停背景色不会覆盖阴影。
• pointer-events:none确保阴影不会挡住鼠标对表格的操作（比如点击行、选中内容）。
• 父容器的伪元素会始终固定在可视区域的边缘，不管表格怎么滚动，阴影的位置都能正确提示隐藏内容。

如果不需要左侧阴影，只保留右侧的话，可以直接去掉::before相关的CSS和JS代码，简化实现。

内容的提问来源于stack exchange，提问作者Ricky Notaro-Garcia