How can i make the footer and header fixed while the table middle scrollable

user_13335907 0
Viewed 62

Can someone please advise me how i go about making the header and footer of my code fixed based on the screen size, and the middle is scrollable. I see some stuff discussing this but no real explanation. I am very much new to coding, hence its a trial error for me. just my fun project keeps me going.

<div class="container-fluid">
 <div class="table-responsive">
    <table class="table table-striped table-sm table-hover">
      <thead>
        <tr>
          <th nowrap="nowrap" class=" text-center">tes1#</th>
          <th nowrap="nowrap" class=" text-center">col2</th>
          <th nowrap="nowrap" class=" text-center">col3</th>
          <th nowrap="nowrap" class=" text-center">col4</th>
          <th nowrap="nowrap" class=" text-center">col6</th>
          <th nowrap="nowrap" class=" text-center">col7</th>
          <th nowrap="nowrap" class=" text-center">col8</th>
        </tr>
      </thead>
      <tbody>


               <!------Item 1-------->
        <tr>
          <td nowrap="nowrap" class=" text-left">1,001</td>
          <td nowrap="nowrap" class=" text-left">Apple</td>
          <td nowrap="nowrap" class=" text-left">Fruits</td>
          <td nowrap="nowrap" class=" text-left">Red Apple</td>
          <td nowrap="nowrap" class=" text-left">Large</td>
          <td nowrap="nowrap" class=" text-left">n/a</td>
          <td nowrap="nowrap" class=" text-center">Each</td>
        </tr>


        <!---------Item 2----------->
        <tr>
          <td nowrap="nowrap" class=" text-left">1,001</td>
          <td nowrap="nowrap" class=" text-left">Apple</td>
          <td nowrap="nowrap" class=" text-left">Fruits</td>
          <td nowrap="nowrap" class=" text-left">Red Apple</td>
          <td nowrap="nowrap" class=" text-left">Large</td>
          <td nowrap="nowrap" class=" text-left">n/a</td>
          <td nowrap="nowrap" class=" text-center">Each</td>
        </tr>


        <!---------Item 2----------->
        <tr>
          <td nowrap="nowrap" class=" text-left">1,001</td>
          <td nowrap="nowrap" class=" text-left">Apple</td>
          <td nowrap="nowrap" class=" text-left">Fruits</td>
          <td nowrap="nowrap" class=" text-left">Red Apple</td>
          <td nowrap="nowrap" class=" text-left">Large</td>
          <td nowrap="nowrap" class=" text-left">n/a</td>
          <td nowrap="nowrap" class=" text-center">Each</td>
        </tr>


        <!---------Item 3----------->
        <tr>
          <td nowrap="nowrap" class=" text-left">1,001</td>
          <td nowrap="nowrap" class=" text-left">Apple</td>
          <td nowrap="nowrap" class=" text-left">Fruits</td>
          <td nowrap="nowrap" class=" text-left">Red Apple</td>
          <td nowrap="nowrap" class=" text-left">Large</td>
          <td nowrap="nowrap" class=" text-left">n/a</td>
          <td nowrap="nowrap" class=" text-center">Each</td>
        </tr>

What i want to acheive

bootstrap-4 css html javascript
2 Answers

using positions attribute will help you for the table head you need to make its position sticky in the first row in the table and set its top to zero so that will be always in the top of the page here is my and @tao attempt :

HTML : 

  <div class="container-fluid">
    <div class="table-responsive">
       <table class="table table-striped table-sm table-hover">
         <thead>
           <tr>
             <th nowrap="nowrap" class=" text-center">tes1#</th>
             <th nowrap="nowrap" class=" text-center">col2</th>
             <th nowrap="nowrap" class=" text-center">col3</th>
             <th nowrap="nowrap" class=" text-center">col4</th>
             <th nowrap="nowrap" class=" text-center">col6</th>
             <th nowrap="nowrap" class=" text-center">col7</th>
             <th nowrap="nowrap" class=" text-center">col8</th>
           </tr>
         </thead>
         <tbody>


                  <!------Item 1-------->
           <tr>
             <td nowrap="nowrap" class=" text-left">1,001</td>
             <td nowrap="nowrap" class=" text-left">Apple</td>
             <td nowrap="nowrap" class=" text-left">Fruits</td>
             <td nowrap="nowrap" class=" text-left">Red Apple</td>
             <td nowrap="nowrap" class=" text-left">Large</td>
             <td nowrap="nowrap" class=" text-left">n/a</td>
             <td nowrap="nowrap" class=" text-center">Each</td>
           </tr>


           <!---------Item 2----------->
           <tr>
             <td nowrap="nowrap" class=" text-left">1,001</td>
             <td nowrap="nowrap" class=" text-left">Apple</td>
             <td nowrap="nowrap" class=" text-left">Fruits</td>
             <td nowrap="nowrap" class=" text-left">Red Apple</td>
             <td nowrap="nowrap" class=" text-left">Large</td>
             <td nowrap="nowrap" class=" text-left">n/a</td>
             <td nowrap="nowrap" class=" text-center">Each</td>
           </tr>


           <!---------Item 2----------->
           <tr>
             <td nowrap="nowrap" class=" text-left">1,001</td>
             <td nowrap="nowrap" class=" text-left">Apple</td>
             <td nowrap="nowrap" class=" text-left">Fruits</td>
             <td nowrap="nowrap" class=" text-left">Red Apple</td>
             <td nowrap="nowrap" class=" text-left">Large</td>
             <td nowrap="nowrap" class=" text-left">n/a</td>
             <td nowrap="nowrap" class=" text-center">Each</td>
           </tr>


           <!---------Item 3----------->
           <tr>
             <td nowrap="nowrap" class=" text-left">1,001</td>
             <td nowrap="nowrap" class=" text-left">Apple</td>
             <td nowrap="nowrap" class=" text-left">Fruits</td>
             <td nowrap="nowrap" class=" text-left">Red Apple</td>
             <td nowrap="nowrap" class=" text-left">Large</td>
             <td nowrap="nowrap" class=" text-left">n/a</td>
             <td nowrap="nowrap" class=" text-center">Each</td>
           </tr>
   <footer class="footer">300 result</footer>

CSS : 

body {
  margin: 0;
  padding: 0;
  max-height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}
.table-responsive {
  max-height: calc(100vh - 60px);
  padding: 0 15px;
}
footer {
  flex: 0 0 auto;
  padding: 1rem;
  background-color: #eee;
  border-top: 1px solid #ddd;
}
thead th {
    position: sticky;
    background-color: white;
    top: 0;
}
user_118913190

A minor improvement over the presented solution:

body {
  max-height: 100vh;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}

.table-responsive.table-responsive {
  overflow-y: auto;
  /* fix pesky sticky header 1px gap */
  margin-top: -1px;
}


/* sticky header */

thead th {
  position: sticky;
  top: 0;
  /* optional styling, ignore */
  background-color: white;
  text-align: left;
}


/* optional styling, ignore */

footer {
  padding: 1rem 0;
  background-color: #eee;
  box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.1), 0 -3px 4px 0 rgba(0, 0, 0, 0.07), 0 -3px 3px -2px rgba(0, 0, 0, 0.06);
  border-top: 1px solid white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<main>
  <div class="container-fluid h-100 position-relative">
    <div class="h-100 row position-absolute w-100">
      <div class="col h-100 pr-0">
        <div class="table-responsive h-100 pr-3">
          <table class="table table-striped table-sm table-hover header-fixed">
            <thead>
              <tr>
                <th nowrap="nowrap">tes1#</th>
                <th nowrap="nowrap">col2</th>
                <th nowrap="nowrap">col3</th>
                <th nowrap="nowrap">col4</th>
                <th nowrap="nowrap">col6</th>
                <th nowrap="nowrap">col7</th>
                <th nowrap="nowrap" class=" text-center">col8</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class="text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class="text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class="text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class="text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class="text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class="text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class="text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class="text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class="text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class="text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class="text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class="text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class=" text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class=" text-center">Each</td>
              </tr>
              <tr>
                <td nowrap="nowrap">1,001</td>
                <td nowrap="nowrap">Apple</td>
                <td nowrap="nowrap">Fruits</td>
                <td nowrap="nowrap">Red Apple</td>
                <td nowrap="nowrap">Large</td>
                <td nowrap="nowrap">n/a</td>
                <td nowrap="nowrap" class=" text-center">Each</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</main>
<footer class="container-fluid">
  <div class="row">
    <div class="col">
      <div contenteditable=true>
        <h4>Change footer height (click to edit)</h4>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
  </div>
</footer>

It uses display:grid instead of flexbox to position the footer at the bottom of the viewport which basically means it does not require hard-coding footer height into the scroller's max-height.
Click to edit footer contents and watch table scroller updating accordingly.

user_18916770
Related