How could I make Bootstrap table with sticky table head?

Question

I am trying to make a (responsive) Bootstrap table. I would like the table head to scroll along when scrolling down the table data. I do not wish to set a height for the table as I would like the page to grow when adding more rows. So simply setting a height and overflow-y: scroll will not suffice.

Setting a position: fixed or even position: sticky will not solve my problem either.

This is the code I tried:

.example {
  padding: 5px;
  margin: 5px 0;
  border-radius: 2px;
  background-color: #afc8f0;
  text-align: center;
}

thead {
  /* position: fixed; */
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <!-- ...
        Some other elements
        .. -->

      <table class="table table-striped table-hover table-sm">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</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>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <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>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <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>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <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>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <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>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <!-- ...
        Some other elements
        .. -->

    </div>
  </div>
</div>

Is there not anything that Bootstrap offers to support such feature (fixed/sticky table header)?

This question is being answered [here](https://stackoverflow.com/questions/44001954/css-only-sticky-table-headers-in-chrome) — Nidhin Joseph, Jun 28 '19 at 09:41
[This](https://stackoverflow.com/a/42507340/9564225) might help you. — Mohd Tabish Baig, Jun 28 '19 at 09:42
@MohdTabishBaig This has helped me out. Will post the solution in an answer. — Barrosy, Jun 28 '19 at 09:52
i have added the solution, please check and accept it as an answer, here is the [fiddle](https://jsfiddle.net/nw940duo/) — Mohd Tabish Baig, Jun 28 '19 at 09:53

Sai Manoj · Accepted Answer · 2019-06-28T10:10:15.547

I have already answered this before here. You can do this way by setting position: sticky;

table thead tr th {
  background-color: white;
  position: sticky;
  top: -1px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<table class="table">
  <thead>
    <tr>
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
      <th>column4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
  </tbody>

</table>

Is there any specific reason I should be using `z-index` here? — Barrosy, Jun 28 '19 at 10:08
Edited that. Not necessary. It depends on the way you structure your layout — Sai Manoj, Jun 28 '19 at 10:11
Would you be able to tell me if I could apply the following solution to a [table](https://jsfiddle.net/cuxhdk69/) with multiple rows within the table head as well? — Barrosy, Jul 08 '19 at 14:56

score 1 · Answer 2 · answered Jun 28 '19 at 09:49

1

Just add this to your css:

table thead tr:first-child th {
  position: sticky;
  top: 0px;
  background-color: #afc8f0;
}

answered Jun 28 '19 at 09:49

Mohd Tabish Baig

442
4
8

Barrosy · Answer 3 · 2019-06-28T10:07:08.047

According to Mohd Tabish Baig's comment I figured out that apparently I had to dig a bit deeper into the target element. Instead of adding position: sticky to thead, I had to add it more specifically to its children th's. The following fiddle shows a solution that helped me out:

.example {
  padding: 5px;
  margin: 5px 0;
  border-radius: 2px;
  background-color: #afc8f0;
  text-align: center;
}

table thead tr th {
  position: sticky;
  top: 0px;
  background: #fff;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <!-- ...
        Some other elements
        .. -->

      <table class="table table-striped table-hover table-sm">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</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>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <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>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <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>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <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>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <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>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <div class="example">
        ... Example ...
      </div>

      <!-- ...
        Some other elements
        .. -->

    </div>
  </div>
</div>

You need to set `top:-1px` as you can see the gap when you scroll. You can see that in my answer — Sai Manoj, Jun 28 '19 at 09:59

How could I make Bootstrap table with sticky table head?

3 Answers3

Linked