HTML表格第一列在水平滚动时固定[重复]答案

【问题标题】：HTML Table first column fixed while scrolling horizontal [duplicate]HTML表格第一列在水平滚动时固定[重复]
【发布时间】：2020-07-27 21:36:41
【问题描述】：

我创建了一个 HTML 表格：

<table id="customers" class="table table-bordered" width="100%">
<thead>
<tr>
<th colspan="2">Activities</th>
<th>Mon 17</th>
<th>Tue 18</th>
</thead> 
<tr>
<td colspan="2" rowspan="2">Session 1</td>
<td></td>
<td></td>
</tr>
<tr> 
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Session 2</td>
<td>Session 2.1</td>
<td></td>
</tr>
<tr>
<td>Session 2.2</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" rowspan="1">Session 3</td>
<td></td>
<td></td>
</tr>
</table>

我要做的是在水平滚动时固定整个第一列（“活动”）。

我尝试使用 CSS 进行此操作，但即使我在右侧添加更多列也无法正常工作，因为我会将日期移到右侧。

.tableFixHead { overflow-x: auto; width: 150px; }

【问题讨论】：

stackoverflow.com/questions/1312236/…

标签： javascript html css

【解决方案1】：

这需要一些调整，但我已经成功地在您希望保留的表格单元格上使用position: sticky 完成了一个“粘性列”：

#customers td:nth-child(1),
#customers th:nth-child(1) {
  position: sticky;
  left: 0;
}

这可以让内容在第一列下方水平滚动。

【讨论】：

【解决方案2】：

他们的关键是在你想粘在屏幕上的行上使用position: fixed。您可以在示例中使用少量 CSS 来实现此目的：

thead tr {
  position: fixed;
}

但是，根据屏幕上的其他内容，您可能需要调整 CSS 和 HTML。

这是一个带有更扩展示例的 CodePen：https://codepen.io/yvesgurcan/pen/oNjjrdN

【讨论】：

这只会使标题固定而不是第一列