如何在表格顶部显示水平滚动条

Question

我有一个表，它有很多列，基本上，它table的类table-responsive带有以下 CSS 设置：

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: scrollbar;
}

它正确显示水平滚动条：

但问题是，这个滚动条出现在表格的末尾，我希望它显示在显示数据的表格顶部（第一行的顶部）。

那么如何将水平滚动条移动到表格顶部（之后<thead>）？

<table class="table table-bordered table-sm">
    <thead class="thead-dark">
         <tr>
              <th>Col 1</th>
              <th>Col 2</th>
              <th>Col 3</th>
              ..
              <th>Col 10</th>
         </tr>
    </thead>
    <tbody>
         <tr>
              ...
         </tr>
    </tbody>
</table>

Answer 1

180 度变换将滚动条旋转到顶部，然后再旋转 180 度以放回内容。我div在您的表格中添加了随机内容，只是出于目的。

.divcontainer {
  overflow-x: scroll;
  overflow-y: auto;
  transform: rotateX(180deg);
}

.divcontainer table {
  transform: rotateX(180deg);
}

.table-responsive {
  width: 100%;
  display: block overflow-x: scroll;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="divcontainer">
  <table class="table table-bordered table-sm table-responsive">
    <thead class="thead-dark">
      <tr>
        <th>Col 1zzzzzzzzzzzzzzzzzzzzz</th>
        <th>Col 2zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</th>
        <th>Col 3zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</th>
        <th>Col 10</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>