如何实现横向滚动表格的固定表头与首列

问题描述 #

我尝试用以下代码固定表格首列：

tr > th:first-child,
tr > td:first-child {
  position: sticky;
  left: 0;
}

代码可运行，但仅能固定表头的第一个<th>。我需要实现首列所有单元格（表头首列+每行首列）固定，其余单元格支持横向滚动。当前的表格结构与CSS代码如下：

当前代码 #

CSS

.container {
  margin: 0px;
 padding : 0px;
  overflow-x: auto;
}

table {
  font-family: "Open Sans", sans-serif;
  position: relative;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
  width: 100%;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

thead tr {
  color: #ececec;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
}

th {
  background: #eefecd;
  padding: 0.75rem 1.5rem;
  vertical-align: middle;
}

tbody tr:nth-child(odd) td {
  background: #fff;
}

tbody tr:nth-child(even) td {
  background: #ececec;
}

td {
  text-align: left;
  padding: 1.5rem 1.5rem;
  vertical-align: middle;
  font-size: 1.125rem;
  font-weight: normal;
}

tr:last-child td:first-child {
  border-bottom-left-radius: 0.5rem;
}

th:first-child {
  border-top-left-radius: 0.5rem;
}

tr:last-child td:last-child {
  border-bottom-right-radius: 0.5rem;
}

th:last-child {
  border-top-right-radius: 0.5rem;
}

tr > th:first-child,
tr > td:first-child {
  position: sticky;
  left: 0;
}

HTML

<div class="container p-0 m-0">
  <table>
    <thead>
      <tr>
        <th>DATA1</th>
        <th>DATA2</th>
        <th>DATA3</th>
        <th>DATA4</th>
        <th>DATA1</th>
        <th>DATA2</th>
        <th>DATA3</th>
        <th>DATA4</th>
        <th>DATA1</th>
        <th>DATA2</th>
        <th>DATA3</th>
        <th>DATA4</th>
        <th>DATA1</th>
        <th>DATA2</th>
        <th>DATA3</th>
        <th>DATA4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
      </tr>
      <tr>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
        <td>Some values</td>
      </tr>
      
    </tbody>
  </table>
</div>

解决方案 #

问题根源是固定单元格缺少z-index设置，滚动时其他列单元格会覆盖固定的首列。只需调整首列的CSS样式，添加层级控制：

tr > th:first-child,
tr > td:first-child {
  position: sticky;
  left: 0;
  z-index: 10; /* 让固定单元格处于其他内容上方 */
}

/* 给表头首列设置更高层级，避免被tbody内容覆盖 */
thead tr > th:first-child {
  z-index: 20;
}

修改后，首列所有单元格都会固定在左侧，横向滚动时不会被其他列遮挡。你的代码中已经给单元格设置了不透明背景色，无需额外调整即可确保内容不穿透显示。

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