1

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:

enter image description here

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 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>
Pouya
  • 114
  • 1
  • 8
  • 36

2 Answers2

3

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/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>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Sergio Yael A.
  • 202
  • 1
  • 8
0

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.

  • This will rotate every data exist in the table ! How to rotate only the scrollbar – Pouya Sep 12 '22 at 11:45
  • You need to rotate the scrollbar and data both. To rotate both you need to apply .table-responsive and .table-responsive * both CSS. –  Sep 12 '22 at 11:47
  • change overflow-x: scrollbar; to overflow-x: scroll; and try with above code. It will work. –  Sep 12 '22 at 11:58
  • You can find this example here also. https://www.geeksforgeeks.org/how-to-change-the-position-of-scrollbar-using-css/ –  Sep 12 '22 at 11:59
  • You should copy down the demo snippet to demonstrate your solution. Also, reference links should be in your answer. Comments are to be considered temporary. – isherwood Sep 12 '22 at 12:59
  • Instead of `.table-responsive *` you probably only want to select the direct children; `.table-responsive > *` – Koen Jun 28 '23 at 08:16