时间戳

首页 > 解决方案 > HTML Table 第一列在水平滚动时固定

javascript - HTML Table 第一列在水平滚动时固定

问题描述

我在下面创建了一个 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; }

标签： javascripthtmlcss

解决方案

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

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

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

推荐阅读