Не удается исправить заголовок, пока таблица прокручивается - PullRequest
Новая
       0

Не удается исправить заголовок, пока таблица прокручивается

1 голос
/ 05 апреля 2020

Мой код работает почти так, как я хочу, однако, после некоторых исследований и попыток, я, наконец, сделал свою таблицу прокручиваемой, однако я не могу сделать так, чтобы заголовок оставался неизменным, независимо от того, что я пытаюсь, может кто-нибудь помочь? Мне нужно исправить заголовок, чтобы вы все еще могли видеть заголовки, когда прокручиваете таблицу вниз, конечно. 

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

Ответы [ 3 ]

0 голосов
/ 05 апреля 2020

Вам просто нужно использовать th (заголовок) для stick. 

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

Демо: 

.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 голосов
/ 05 апреля 2020

Добавить к т 

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 голосов
/ 05 апреля 2020

Вы можете использовать следующие css с небольшим количеством 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");
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...