Twitter Bootstrap Question posted in

Can't make my header fixed whilst my table is scrollable-Twitter bootstrap

My code works almost as I want it however after some research and trying I finally made my table scrollable however I can’t seem to make the header stay fixed no matter what I try, could someone be able to help?
I need the header to be fixed so you can still see the headings when you scroll down the table of course. 

.my-custom-scrollbar {
  position: relative;
  height: 500px;
  overflow: auto;
}

.table-wrapper-scroll-y {
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="myScript.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <meta charset="utf-8">
  <title>Users</title>
  <meta name="description" content="APP Web Task 5">
  <meta name="author" content="SitePoint">
</head>
<!--Text body-->

<body>
  <!--header-->

  <header class="container jumbotron text-center">
    <h2>APP Single Page App</h2>
  </header>

  <!--Section 1, table-->
  <div class="container">
    <section id="sectUsers">
      <div class="table-wrapper-scroll-y my-custom-scrollbar">
        <table id="tblUsers" class="table table-striped table-bordered table-fixed">
          <!--Table header-->
          <thead class="table table-bordered table-primary table-striped text-center">
            <tr id="tblUserHeader">
              <th scope="col">User ID</th>
              <th scope="col">Email</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Avatar</th>
            </tr>
          </thead>
          <!--Table body-->
          <tbody class="table table-bordered">
            <tr id="user1">
              <td scope="row"><b>1</b></td>
              <td>[email protected]</td>
              <td>George</td>
              <td class="w3-center">Bluth</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>

            <tr id="user2">
              <td scope="row"><b>2</b></td>
              <td>[email protected]</td>
              <td>Janet</td>
              <td class="w3-center">Weaver</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>

            <tr id="user3">
              <td scope="row"><b>3</b></td>
              <td>[email protected]</td>
              <td>Emma</td>
              <td class="w3-center">Wong</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>


            <tr id="user4">
              <td scope="row"><b>4</b></td>
              <td>[email protected]</td>
              <td>Eve</td>
              <td class="w3-center">Holt</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>

            <tr id="user5">
              <td scope="row"><b>5</b></td>
              <td>[email protected]</td>
              <td>Charles</td>
              <td>Morris</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>

            <tr id="user6">
              <td scope="row"><b>6</b></td>
              <td>[email protected]</td>
              <td>Tracey</td>
              <td>Ramos</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>
          </tbody>

          <!--    <div id="divPageNumber">Page<span id="pageNumber">1</span> of <span id="totalPages">2</span></div>
                      <button id="btnPrevious" >Previous</button><button id="btnNext" >Next</button> -->
      </div>
    </section>
Tags:

3

Answers


  1. 0

    You can use the following css with a little bit of js :

    CSS

    .sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

    JS

    window.onscroll = function() {stickyHeaderFunction()};
var header = document.getElementById("your_header");
var sticky = header.offsetTop;

function stickyHeaderFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky")
  } else {
    header.classList.remove("sticky");
  }
}
    Login or Signup to reply.
  2. 0

    You just have to use the th(header) to stick.

    th {
 background: white;
 position: sticky;
 top: 0;
 box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

    Demo:

    .my-custom-scrollbar {
  position: relative;
  height: 500px;
  overflow: auto;
}

.table-wrapper-scroll-y {
  display: block;
}

th {
  background: #B8DAFF;
  position: sticky;
  top: 0;
}

.table {
  border-collapse: separate;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <script src="myScript.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <meta charset="utf-8">
  <title>Users</title>
  <meta name="description" content="APP Web Task 5">
  <meta name="author" content="SitePoint">
</head>
<!--Text body-->

<body>
  <!--header-->

  <header class="container jumbotron text-center">
    <h2>APP Single Page App</h2>
  </header>

  <!--Section 1, table-->
  <div class="container">
    <section id="sectUsers">
      <div class="table-wrapper-scroll-y my-custom-scrollbar">
        <table id="tblUsers" class="table table-striped table-bordered table-fixed">
          <!--Table header-->
          <thead class="table table-bordered table-primary table-striped text-center">
            <tr id="tblUserHeader">
              <th scope="col">User ID</th>
              <th scope="col">Email</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Avatar</th>
            </tr>
          </thead>
          <!--Table body-->
          <tbody class="table table-bordered">
            <tr id="user1">
              <td scope="row"><b>1</b></td>
              <td>[email protected]</td>
              <td>George</td>
              <td class="w3-center">Bluth</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>

            <tr id="user2">
              <td scope="row"><b>2</b></td>
              <td>[email protected]</td>
              <td>Janet</td>
              <td class="w3-center">Weaver</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>

            <tr id="user3">
              <td scope="row"><b>3</b></td>
              <td>[email protected]</td>
              <td>Emma</td>
              <td class="w3-center">Wong</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>


            <tr id="user4">
              <td scope="row"><b>4</b></td>
              <td>[email protected]</td>
              <td>Eve</td>
              <td class="w3-center">Holt</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>

            <tr id="user5">
              <td scope="row"><b>5</b></td>
              <td>[email protected]</td>
              <td>Charles</td>
              <td>Morris</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>

            <tr id="user6">
              <td scope="row"><b>6</b></td>
              <td>[email protected]</td>
              <td>Tracey</td>
              <td>Ramos</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>
          </tbody>

          <!--    <div id="divPageNumber">Page<span id="pageNumber">1</span> of <span id="totalPages">2</span></div>
                      <button id="btnPrevious" >Previous</button><button id="btnNext" >Next</button> -->
      </div>
    </section>
    Login or Signup to reply.
  3. 0

    Add to th 

    position:sticky;
top:0;

    .my-custom-scrollbar {
  position: relative;
  height: 500px;
  overflow: auto;
}

.table-wrapper-scroll-y {
  display: block;
}
.my-custom-scrollbar table th {
  background:#b8daff;
  position:sticky;
  top:0;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <script src="myScript.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <meta charset="utf-8">
  <title>Users</title>
  <meta name="description" content="APP Web Task 5">
  <meta name="author" content="SitePoint">
</head>
<!--Text body-->

<body>
  <!--header-->

  <header class="container jumbotron text-center">
    <h2>APP Single Page App</h2>
  </header>

  <!--Section 1, table-->
  <div class="container">
    <section id="sectUsers">
      <div class="table-wrapper-scroll-y my-custom-scrollbar">
        <table id="tblUsers" class="table table-striped table-bordered table-fixed">
          <!--Table header-->
          <thead class="table table-bordered table-primary table-striped text-center">
            <tr id="tblUserHeader">
              <th scope="col">User ID</th>
              <th scope="col">Email</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Avatar</th>
            </tr>
          </thead>
          <!--Table body-->
          <tbody class="table table-bordered">
            <tr id="user1">
              <td scope="row"><b>1</b></td>
              <td>[email protected]</td>
              <td>George</td>
              <td class="w3-center">Bluth</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>

            <tr id="user2">
              <td scope="row"><b>2</b></td>
              <td>[email protected]</td>
              <td>Janet</td>
              <td class="w3-center">Weaver</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>

            <tr id="user3">
              <td scope="row"><b>3</b></td>
              <td>[email protected]</td>
              <td>Emma</td>
              <td class="w3-center">Wong</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>


            <tr id="user4">
              <td scope="row"><b>4</b></td>
              <td>[email protected]</td>
              <td>Eve</td>
              <td class="w3-center">Holt</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>

            <tr id="user5">
              <td scope="row"><b>5</b></td>
              <td>[email protected]</td>
              <td>Charles</td>
              <td>Morris</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>

            <tr id="user6">
              <td scope="row"><b>6</b></td>
              <td>[email protected]</td>
              <td>Tracey</td>
              <td>Ramos</td>
              <td>
                <div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
              </td>
            </tr>
          </tbody>

          <!--    <div id="divPageNumber">Page<span id="pageNumber">1</span> of <span id="totalPages">2</span></div>
                      <button id="btnPrevious" >Previous</button><button id="btnNext" >Next</button> -->
      </div>
    </section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search