Mon code fonctionne presque comme je le souhaite, mais après quelques recherches et essais, j'ai finalement fait défiler ma table, mais je n'arrive pas à faire en sorte que l'en-tête reste fixe, peu importe ce que j'essaie, est-ce que quelqu'un pourrait aider? J'ai besoin que l'en-tête soit corrigé pour que vous puissiez toujours voir les en-têtes lorsque vous faites défiler le tableau bien sûr.

.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>george.bluth@reqres.in</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>janet.weaver@reqres.in</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>emma.wong@reqres.in</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>eve.holt@reqres.in</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>charles.morris@reqres.in</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>tracey.ramos@reqres.in</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>
1
Maja Bobrowicz 5 avril 2020 à 16:50

3 réponses

Meilleure réponse

Ajouter à 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>george.bluth@reqres.in</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>janet.weaver@reqres.in</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>emma.wong@reqres.in</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>eve.holt@reqres.in</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>charles.morris@reqres.in</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>tracey.ramos@reqres.in</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>
0
Ziad Darwich 5 avril 2020 à 14:07

Vous pouvez utiliser le CSS suivant avec un peu de 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");
  }
}
0
Maxime Delgado 5 avril 2020 à 13:57

Il vous suffit d'utiliser le th (en-tête) pour stick.

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

Démo:

.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>george.bluth@reqres.in</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>janet.weaver@reqres.in</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>emma.wong@reqres.in</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>eve.holt@reqres.in</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>charles.morris@reqres.in</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>tracey.ramos@reqres.in</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>
0
Manjuboyz 5 avril 2020 à 14:48