Липкая головка строки не работает, когда меняются некоторые столбцы

Question

В предыдущей таблице липкая голова работала хорошо. Затем я сделал некоторые изменения в первом и втором исправленных столбцах. Тогда после ряда голова липкая не работает. Я не могу найти, где я был не прав. Я добавил свой код ниже.

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;
}

Таблица ->

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

Я добавил ниже CSS, чтобы сделать строку Head Stick в main.handlerbars.

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

Если вы можете дать мне решение, это поможет вам. Спасибо.

Answer 1

Вам нужно увеличить z-index липких левых элементов. Поскольку вы сделали все элементы липкими, последние будут перекрывать предыдущие:

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