How can I show a horizontal scrollbar at the top of the table-CodePudding

I have a table and that has lots of columns and basically, the table has the class of table-responsive which comes with this CSS settings:

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

And it properly shows the horizontal scrollbar:

But the problem is, that this scrollbar appears at the end of the table and I want this to be displayed at the top of the table where the data is being displayed (top of the 1st row).

So how can I move the horizontall scrollbar to to the top of the table (after <thead>)?

<table >
    <thead >
         <tr>
              <th>Col 1</th>
              <th>Col 2</th>
              <th>Col 3</th>
              ..
              <th>Col 10</th>
         </tr>
    </thead>
    <tbody>
         <tr>
              ...
         </tr>
    </tbody>
</table>

CodePudding user response：

A 180 degree transform to rotate the scrollbar to the top, then again another 180 degree to put back the content. I Added a div and random content to your table, just for purposes.

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <table >
    <thead >
      <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>

CodePudding user response：

There's no direct CSS support for this, and browsers are technically free to implement this feature any way they want to, so most scrollbars are bottom and right for x- and y-overflow. That said, I found a nice trick that may serve your purposes:

  .table-responsive  {
    transform: rotateX(180deg);
  }
  .table-responsive *  {
    transform: rotateX(180deg);
  }

What we need to do here is "flip" the outer box so it's upside down, and then the content inside is flipped back right-side up so it's legible.

You may need to experiment a bit to get this just right, but it should work with a bit of work.