粘性 table header 结构中的不透明度问题

Question

我创建了 fiddle 以供参考：- FIDDLE。在此我有 table 结构，我想将 table header 粘贴在页面顶部，因此我使用了 translateY() 你可以在 [=21= 上查看它]FIDDLE。现在在第一列上有 不透明度的复选框：0.3。

现在，当我滚动 table 并且 tbody 的任何复选框与 thead 的复选框重叠时，我无法选中 thead 复选框。

我还制作了问题视频 :- VIDEO。如果 opacity 小于 1，然后如果您尝试重叠复选框，则不会选中 thead 复选框。如果我使用 opacity:1 它工作正常。即使我将 z-index 给 header 的复选框，它也不起作用。 注意：-我无法删除或更改输入不透明度

Answer 1

这是 Chrome...

的（hacky）解决方法

在 inputs 之上使用 psuedoelement 创建不透明效果并设置 pointer-events: none。

fiddle

$(this).on('scroll', function() {
  $('table').find('#table_header').css('transform', 'translateY(' + $(this).scrollTop() + 'px)');
});

table {
  position: relative;
}

table:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  
  display: block;
  background: #fff;
  opacity: .7;
  width: 20px;
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead id='table_header'>
    <tr>
      <th>
        <div>
          <input type="checkbox" name="">
        </div>
      </th>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>

  </tbody>
</table>

Answer 2

奇怪的错误。似乎可以通过在 html 源中将 <thead> 置于 <tbody> 下方来解决。 https://jsfiddle.net/euejc4kg/

所以它与 stacking/order 有关，我想我可以通过在 tbody 上设置 translate3d 或任何东西来修复它，但似乎没有修复它。但也许这是其他人可以使用的东西。

另一种选择可能是在复选框顶部使用标签，并且在复选框上根本没有指针事件。

粘性 table header 结构中的不透明度问题

Opacity issue in sticky table header structure

css

z-index

opacity