如何将位置粘性用于水平滚动条？

【问题标题】：How to use position sticky for horizontal scrollbar?如何将位置粘性用于水平滚动条？
【发布时间】：2021-07-05 23:35:29
【问题描述】：

我需要根据 X 轴滚动表格。我的代码看起来像这样。我也尝试过定位 fixeb，但由于某种原因，它只能在 Y 轴上滚动。我做错了什么？

HTML

table {
    margin-top: 20px;
    width: 100%;
}
table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}
th,
td {
    padding: 10px;
    text-align: left;
}
th {
    font-weight: 700;
    position: sticky;
}

<table>
    <tr>
        <th>Some header</th>
        <td>1</td>
        <td>2</td>
        ...
        <td>20</td>
    </tr>
    <tr>
        <th>Some header</th>
        <td>1</td>
        <td>2</td>
        ...
        <td>20</td>
    </tr>
    <table></table>
</table>

【问题讨论】：

标签： html css html-table css-position sticky

【解决方案1】：

我认为您只需要第一列的便签：

.wrapper {
  max-width: 400px;
  overflow-x: scroll;
}

table {
  position: relative;
  border: 1px solid #ddd;
  border-collapse: collapse;
}

td, th {
  white-space: nowrap;
  border: 1px solid #ddd;
  padding: 20px;
  text-align: center;
}

td:first-of-type {
  background-color: #eee;
  position: sticky;
  left: -1px;
  text-align: left;
}

<div class="wrapper">
<table>
  <tbody>
    <tr>
        <td>Some header</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>
    <tr>
        <td>Some header</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>

解决方案来自CSS-Tricks 上的帖子。

【讨论】：