Search code examples
javascripthtmlcssscrollbar

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

I have a table that has a lot 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 horizontal scrollbar 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>
Solution

  • 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 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>