html - 带有粘性标题和水平滚动的表格

Question

如何让水平滚动和粘性标题同时工作？

Here是码笔码

.table-wrapper {
  overflow-x: auto;
}

th {
  position: sticky;
  top: 0;
}

<div class="table-wrapper">
  <table>
    <tr>
      <th>Donec faucibus</th>
      <th>Proin ante</th>
      <th>Mauris</th>
      <th>Egestas</th>
    </tr>
    <tr>
      <td>lacinia&nbsp;sem&nbsp;vestibulum&nbsp;consectetur&nbsp;lacus</td>
      <td>phasellus&nbsp;eu&nbsp;semper&nbsp;nibh</td>
      <td>nulla&nbsp;elementum&nbsp;viverra&nbsp;malesuada</td>
      <td>nulla&nbsp;elementum&nbsp;viverra&nbsp;malesuada</td>
    </tr>
    <tr>
      <td>lacinia sem vestibulum, consectetur lacus</td>
      <td>phasellus eu semper nibh</td>
      <td>nulla elementum viverra malesuada</td>
      <td>nulla&nbsp;elementum&nbsp;viverra&nbsp;malesuada</td>
    </tr>
    <tr>
      <td>lacinia sem vestibulum, consectetur lacus</td>
      <td>phasellus eu semper nibh</td>
      <td>nulla elementum viverra malesuada</td>
      <td>nulla&nbsp;elementum&nbsp;viverra&nbsp;malesuada</td>
    </tr>
    <tr>
      <td>lacinia sem vestibulum, consectetur lacus</td>
      <td>phasellus eu semper nibh</td>
      <td>nulla elementum viverra malesuada</td>
      <td>nulla&nbsp;elementum&nbsp;viverra&nbsp;malesuada</td>
    </tr>
    <tr>
      <td>lacinia sem vestibulum, consectetur lacus</td>
      <td>phasellus eu semper nibh</td>
      <td>nulla elementum viverra malesuada</td>
      <td>nulla&nbsp;elementum&nbsp;viverra&nbsp;malesuada</td>
    </tr>
    <tr>
      <td>lacinia sem vestibulum, consectetur lacus</td>
      <td>phasellus eu semper nibh</td>
      <td>nulla elementum viverra malesuada</td>
      <td>nulla&nbsp;elementum&nbsp;viverra&nbsp;malesuada</td>
    </tr>
    <tr>
      <td>lacinia sem vestibulum, consectetur lacus</td>
      <td>phasellus eu semper nibh</td>
      <td>nulla elementum viverra malesuada</td>
      <td>nulla&nbsp;elementum&nbsp;viverra&nbsp;malesuada</td>
    </tr>
    <tr>
      <td>lacinia sem vestibulum, consectetur lacus</td>
      <td>phasellus eu semper nibh</td>
      <td>nulla elementum viverra malesuada</td>
      <td>nulla&nbsp;elementum&nbsp;viverra&nbsp;malesuada</td>
    </tr>
  </table>
</div>

Answer 1

您可以将max-width 属性添加到div。下面是一个例子:

.table-wrapper {
  max-width:100vw;overflow-x:auto; /* for horizontal scroll */
  height:200px;overflow-y:auto; /* for vertical scroll */
  position: relative; /* relative to the normal flow */
  border: solid 5px red /* for reference */
}

th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* extra styles below - not necessary */
  background:black;color:white;white-space:nowrap
}

/* AND SOME EXTRA STYLES FOR SNIPPET */
*{box-sizing:border-box}
table{background:lightblue;border-collapse:collapse}
th,td{border:solid 1px dodgerblue;padding:20px 50px}

<div class="table-wrapper">
<table>
<thead>
  <tr>
    <th>chapter 1</th>
    <th>chapter 2</th>
    <th>chapter 3</th>
    <th>chapter 4</th>
    <th>chapter 5</th>
    <th>chapter 6</th>
    <th>chapter 7</th>
    <th>chapter 8</th>
    <th>chapter 9</th>
    <th>chapter 10</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Sad</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
  </tr>
  <tr>
    <td>Sad</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
  </tr>
  <tr>
    <td>Sad</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
  </tr>
  <tr>
    <td>Sad</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
  </tr>
  <tr>
    <td>Sad</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
  </tr>
  <tr>
    <td>Sad</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
  </tr>
  <tr>
    <td>Sad</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
    <td>Happy</td>
  </tr>
</tbody>
</table>
</div>