locked
Stick the Table Header to the bottom of the upper div tag. RRS feed

  • Question

  • User-1549556126 posted

    There is a feature in css for setting up the to the division and it does works on the <th> tag too, however, what I am trying to do is stick the div to the top of the page using css. However, I am trying to stick the <th> tags in the <thead> tag of the table right below that sticky div but it is still getting hidden behind the <div>. Is that an issue with z-index? This is what I am doing in css:

    .collapsible {
    background-color: #0066B2;
    color: white;
    width: 100%;
    border: none;
    text-align: left;
    font-size: 12px;
    padding: 10px 30px 10px;
    }

    .collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    }

    #btnFilter.active:after {
    content: "\2212";
    }

     
    .stickyDiv { position: -webkit-sticky; ; z-index: 100; top: -1px; background-color: #FFF; border: initial; } table.floatThead-table { border-top: none; border-bottom: none; background-color: #fff; } th { position: -webkit-sticky; ; top: 120px; background-color: #0B2D71; }


    This is my sticky div & table in HTML:

    <div class="row stickyDiv">
    <div class="col-md-12">
    <button class="collapsible myBtn arrow-link" id="btnMsg" style="width:100%;">filter members</button>
    <div class="content">
    <p>Lorem Ipsum</p>
    </div>
    </div>
    </div>
    <div class="col-md-12"> <table id="data" class="table table-striped table-hover" style="width:100%; height:auto;" cellspacing="0"> <thead> <tr id="thead" class="reviewsubhead"> <th>member name</th> <th>member type</th> </tr> </thead> <tbody id="tbody"> <tr><td>ABC</td>
    <td>Gold</td>
    </tr> <tr><td>XYZ</td>
    <td>Platinum</td>
    </tr> <tr>
    <td>JKL</td>
    <td>Diamond</td>
    </tr> </tbody> </table>
    </div>

    Yes the sticky div has a collapsible too. so that div will collapse & expand and the table header needs to move accordingly.

    Tuesday, August 27, 2019 12:03 AM

Answers

  • User-719153870 posted

    Hi vyasnikul,

    In your demo, when i scroll the page, the blue thead is sticked under the gray div, but when scroll out the table, the blue thead will disappear along with the table.

    Like below:

    Obviously, the blue thead is bound to the table, if you want to make the blue thead always sticked under the gray div, you need to get it out of your original table.

    Please refer to bleow code:

    HTML:

    <div class="row stickyDiv">
      <div class="col-md-12">
        <button class="collapsible">Open Collapsible</button>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
    <div class="row tab">
      <table id="data" class="table table-striped table-hover" style="width:100%; height:auto;" cellspacing="0">
      <thead>
          <tr>
            <th style="width:50%">member name</th>
            <th>member type</th>
          </tr>
        </thead>
      </table>
      </div>
    <div class="col-md-12">
      <table id="data" class="table table-striped table-hover" style="width:100%; height:auto;" cellspacing="0">
        <tbody id="tbody"> you will need to delete the thead tag here
    <tr> <td style="width:50%">ABC</td> <td>Gold</td> </tr> <tr> <td>XYZ</td> <td>Platinum</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> </tbody> </table> </div>

    CSS:

    html,
    body {
      height: 1500px;
    }
    
    .collapsible {
      background-color: #777;
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
    }
    
    .active,
    .collapsible:hover {
      background-color: #555;
    }
    
    .content {
      padding: 0 18px;
      display: none;
      overflow: hidden;
      background-color: #f1f1f1;
    }
    
    .stickyDiv {
      position: -webkit-sticky;
      ;
      z-index: 100;
      top: -1px;
      background-color: #FFF;
      border: initial;
    }
    
    table.floatThead-table {
      border-top: none;
      border-bottom: none;
      background-color: #fff;
    }
    
    .tab{
      position: -webkit-sticky;
      ;
      z-index: 100;
      top: 50px;
      background-color: #FFF;
      border: initial;
    }
    
    th {
      position: -webkit-sticky;
      ;
      top: 50px;
      background-color: #0B2D71;
      color: #fff;
      text-align: left;
    }

    The result will be like below:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 28, 2019 2:11 AM

All replies

  • User-719153870 posted

    Hi vyasnikul,

    however, what I am trying to do is stick the div to the top of the page using css. However, I am trying to stick the <th> tags in the <thead> tag of the table right below that sticky div but it is still getting hidden behind the <div>.

    It's really confusing what you are trying to do actually.

    I used your code and built a demo, the stickydiv you were talking about didn't hide the <th>, however, the <th> did hide the first row of your table.

    Is this what you are trying to figure out?

    If it is, change the top property in your th's style to a smaller number(for example, 70px) will solve the problem.

    Please refer to below code:

    th {
                position: -webkit-sticky;
                ;
                top: 70px;
                background-color: #0B2D71;
            }

    Or, if there's any misunderstanding, please feel free to let me know. And provide more detailed description(maybe an image with some comment) about your requirement and your code please.

    Best Regard,

    Yang Shen

    Tuesday, August 27, 2019 2:44 AM
  • User-1549556126 posted

    Yang thanks for the response, the issue is the header of the table need to stick with the bottom of div which is on the top not the top of the screen and it seems like putting pixels manually wont help as when the screen resolution changes the pixels will increase ultimately overlapping the table header.  Here's the jsfiddle link https://jsfiddle.net/g6340Lbu/1/ that I created, apologize for unorganized code. 

    When the page is scrolled down the filter when expanded overlaps the table headers rather than shifting down with the expanded division. 

    Tuesday, August 27, 2019 3:42 PM
  • User-719153870 posted

    Hi vyasnikul,

    In your demo, when i scroll the page, the blue thead is sticked under the gray div, but when scroll out the table, the blue thead will disappear along with the table.

    Like below:

    Obviously, the blue thead is bound to the table, if you want to make the blue thead always sticked under the gray div, you need to get it out of your original table.

    Please refer to bleow code:

    HTML:

    <div class="row stickyDiv">
      <div class="col-md-12">
        <button class="collapsible">Open Collapsible</button>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
    <div class="row tab">
      <table id="data" class="table table-striped table-hover" style="width:100%; height:auto;" cellspacing="0">
      <thead>
          <tr>
            <th style="width:50%">member name</th>
            <th>member type</th>
          </tr>
        </thead>
      </table>
      </div>
    <div class="col-md-12">
      <table id="data" class="table table-striped table-hover" style="width:100%; height:auto;" cellspacing="0">
        <tbody id="tbody"> you will need to delete the thead tag here
    <tr> <td style="width:50%">ABC</td> <td>Gold</td> </tr> <tr> <td>XYZ</td> <td>Platinum</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> <tr> <td>JKL</td> <td>Diamond</td> </tr> </tbody> </table> </div>

    CSS:

    html,
    body {
      height: 1500px;
    }
    
    .collapsible {
      background-color: #777;
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
    }
    
    .active,
    .collapsible:hover {
      background-color: #555;
    }
    
    .content {
      padding: 0 18px;
      display: none;
      overflow: hidden;
      background-color: #f1f1f1;
    }
    
    .stickyDiv {
      position: -webkit-sticky;
      ;
      z-index: 100;
      top: -1px;
      background-color: #FFF;
      border: initial;
    }
    
    table.floatThead-table {
      border-top: none;
      border-bottom: none;
      background-color: #fff;
    }
    
    .tab{
      position: -webkit-sticky;
      ;
      z-index: 100;
      top: 50px;
      background-color: #FFF;
      border: initial;
    }
    
    th {
      position: -webkit-sticky;
      ;
      top: 50px;
      background-color: #0B2D71;
      color: #fff;
      text-align: left;
    }

    The result will be like below:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 28, 2019 2:11 AM