html - 更改某些列粘性时，行头粘性不起作用

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 下面添加了在 main.handlerbars 中做行头棒。

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

如果你能给我一个解决方案来解决这将是一个巨大的帮助。谢谢你。

标签： htmlcss

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>