Row head sticky not working when change some column sticky

Question

In previous table's row head sticky was working well. Then I did some changes to the first and second columns fixed. Then after row head sticky is not working. I can not find where I was wrong. I added my code below.

CSS -->

.view {
  margin: auto;
  width: 100%;
}

.wrapper {
  position: relative;
  overflow: auto;
  white-space: nowrap;
}

.sticky-col {
  position: sticky;
  position: -webkit-sticky;    
  background-color: white;
  z-index:1;
}

.first-col {
  width: 100px;
  min-width: 100px;
  max-width: 100%;
  left: 0px;
}

.second-col {
  width: 150px;
  min-width: 150px;
  max-width: 100%;
  left: 100px;   
}

th {
  background: white;
  position: sticky;
  top: 0;
}

Table -->

<div class="view">
<div class="wrapper"> 
  <table>
    <thead>
      <tr>
        <th class="sticky-col first-col">Col 1</th>
        <th class="sticky-col second-col">Col 2</th>
        <th>...</th>
        <th>...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky-col first-col"></td>
        <td class="sticky-col second-col"></td>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

I have added below CSS to do row head stick in main.handlerbars.

th {
  background: white;
  position: sticky;
  top: 0;
}

If you can give me a fix to solve this will be a huge help. Thank you.

@TemaniAfif I corrected it. But the code is not working. That was happened when I type the question. Sorry for the mistake. — gt_nexus, Apr 17 '20 at 19:36

Temani Afif · Accepted Answer · 2020-04-17T19:53:57.810

You need to increase the z-index of the sticky left elements. Since you made all the element to be sticky, the latter ones will overlap the previous ones:

.view {
  margin: auto;
  width: 100%;
}

.wrapper {
  position: relative;
  overflow: auto;
  white-space: nowrap;
  height:100px;
}

.sticky-col {
  position: sticky;
  position: -webkit-sticky;    
  background-color: white;
}

.first-col {
  width: 100px;
  min-width: 100px;
  max-width: 100%;
  left: 0px;
}

.second-col {
  width: 150px;
  min-width: 150px;
  max-width: 100%;
  left: 100px;   
}

th {
  background: white;
  position: sticky;
  top: 0;
}

th.sticky-col  {
  z-index:1;
}

<div class="view">
<div class="wrapper"> 
  <table id="app" class='table table-bordered table-sm'>
    <thead>
      <tr>
        <th class="sticky-col first-col">Product</th>
        <th class="sticky-col second-col">Description</th>
        <th>Lorem ipsum dolor sit amet, consectetur</th>
        <th>Lorem ipsum dolor sit amet, consectetur</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky-col first-col">consectetur </td>
        <td class="sticky-col second-col">consectetur </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
      </tr>
      <tr>
        <td class="sticky-col first-col">consectetur </td>
        <td class="sticky-col second-col">consectetur </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
      </tr>
      <tr>
        <td class="sticky-col first-col">consectetur </td>
        <td class="sticky-col second-col">consectetur </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
      </tr>
      <tr>
        <td class="sticky-col first-col">consectetur </td>
        <td class="sticky-col second-col">consectetur </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
      </tr>
    </tbody>
  </table>
</div>

But row headers sticky is not working. I edit the question with your answer. — gt_nexus, Apr 17 '20 at 19:44
Row header sticky worked well before doing the first two-column fixed. — gt_nexus, Apr 17 '20 at 19:47
@gt_nexus *working* and *not working* isn't really helpful, you need to define what's is *working* and what is not (how it's actually working and how you expect it to be). — Temani Afif, Apr 17 '20 at 19:49
My expectation is when scrolling horizontally first two columns should not scroll. It is working well now. Now the problem is when I scroll vertically row headers not sticky. I want to sticky the row headers when scrolling vertically. — gt_nexus, Apr 17 '20 at 19:51
You have added `height:100px;` for wrapper class. Then it works nicely. But after you add `height:100px;` the table is showing only several columns. when I change it as `height:100%;` columns flow in page nicely but row sticky is not working agian. What is the problem there? — gt_nexus, Apr 17 '20 at 19:58
@gt_nexus you are looking for `height:100vh`. height:100% will only work if the parent element has an explicit height defined: https://stackoverflow.com/q/1622027/8620333 — Temani Afif, Apr 17 '20 at 20:00
When I add `height:100vh` it workes nicely. Thank you for help. If you can update the question with this, I can accept the answer. — gt_nexus, Apr 17 '20 at 20:03
@gt_nexus it's not really needed since it's not the main issue of the question. The issue is related to z-index and the height is an extra thing — Temani Afif, Apr 17 '20 at 20:04

Row head sticky not working when change some column sticky

1 Answers1