在表格的水平滚动上，我怎样才能保持粘性直到到达下一个？答案

【问题标题】：On horizontal scroll for a table, how can I have sticky th until reach the next th?在表格的水平滚动上，我怎样才能保持粘性直到到达下一个？
【发布时间】：2017-03-21 16:11:20
【问题描述】：

我有一个带有水平滚动条的表格。水平滚动表格时，我需要使前两行的数据具有粘性。这是第一张桌子：

滚动时，我希望显示“2016”和“Dec”，直到到达“2017”和“Jan”，2017 和 Jan 也是如此，直到到达下一个日期。这是滚动时的图片：

还有下次约会时的照片：

请注意，我不希望数字很粘。我已经使用scrollToFixed 库进行垂直滚动，但我不确定它是否适用于我的情况。任何提示将不胜感激。

【问题讨论】：

Sticky Table Headers的可能重复
请在标记为重复之前仔细阅读问题！我不是在寻找通常滚动的粘性标题！
这个问题你解决了吗？？我也在寻找这个功能。谢谢
@HokageSama 您应该可以使用colspan="number" 来扩展项目的宽度，然后将文本包装在position:sticky; 元素中以在他的<td> 内移动每个项目
谢谢你的建议先生，我试过这个但它不起作用：html snipet: # Name
帐户
CSS: .accounts { position: -webkit-sticky;位置：粘性； }

标签： javascript jquery css html-table horizontal-scrolling

【解决方案1】：

您可以只使用带有position: sticky 的css。

注意：

将.sticky 放在th 和文本上，效果如下：
如果您不想剪切文本，只需删除th 上的类粘性即可。

.sticky {
  position: sticky;
  left: 0;
}
.table-wrapper {
  max-width: 200px;
  overflow-x: auto;
}
td {
  min-width: 40px;
}
th {
  padding: 0 5px;
  background-color: white;
  text-align: left;
}

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th class="sticky" colspan="10">
          <span class="sticky">2016</span>
        </th>
        <th class="sticky" colspan="10">
           <span class="sticky">2017</span>
        </th>
      </tr>
      <tr>
        <th class="sticky" colspan="10">
          <span class="sticky">Dec</span>
        </th>
        <th class="sticky" colspan="10">
          <span class="sticky">Jan</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：