如何在水平滚动条上使用位置粘性？

debugcn 发表于 Dev

米迦勒

我需要根据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>

里奇·德伯克

我认为您只需要在第一列粘贴即可：

.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上的文章。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。