粘性表格标题结构中的不透明度问题答案

【问题标题】：Opacity issue in sticky table header structure粘性表格标题结构中的不透明度问题
【发布时间】：2018-06-04 00:42:12
【问题描述】：

我创建了小提琴供参考：-FIDDLE。在这个我有表结构，我想把表头贴在页面顶部，所以我使用了translateY()，你可以在 FIDDLE 上检查它。现在在第一列有一个带有 opacity: 0.3 的复选框。

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

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

【问题讨论】：

哪个浏览器？在 Chrome 上这对我来说很好
你为什么一开始就给出不透明度？
@TemaniAfif 它不起作用。他想说的是，如果有不透明度，然后如果您尝试重叠复选框，则不会选中 thead 复选框。
是的，@Highdef，我已经在 chrome 中测试过了。
@Highdef 我测试过，它对我有用 :) 我可以选择/取消选择所有内容

标签： css z-index opacity

【解决方案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>

【讨论】：

这里你已经删除了输入的不透明度，但我不能删除不透明度（因为奇怪的要求:() FIDDLE :- jsfiddle.net/8r7yLook/2 如果我再次删除它就不行了
我认为 webkit 错误和 opacity 的组合导致了这个问题。您能否重新审视该要求，看看是否可以更改？
@sol 抱歉，我做不到。有什么办法吗？
@VandanShah 如果我知道另一种方法，我会更新我的答案，但我找不到。

【解决方案2】：

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

所以它与堆叠/顺序有关，我想我可以通过设置 translate3d 或 tbody 上的任何内容来修复它，但这似乎并没有解决它。但也许这是其他人可以使用的东西。

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

【讨论】：

不错的发现！我尝试使用 CSS 中的堆叠和 translate3d 等...没有任何效果。 +1
是的，这对我有用。但是如果我们不想在 html 中编辑或添加，只有 CSS 有什么办法。（是的，这很奇怪，但只是想知道有没有办法）谢谢..
还没有找到（现在没有太多时间），但如果它不是您想要更改的 html，您可以使用 JavaScript 移动它。只能用 CSS 来改变它似乎是一个奇怪的要求，并且可能需要太多糟糕的 hack，从长远来看只会让情况变得更糟。
@sol 和 "René" 如果您找到任何替代方案，请告诉我，仅使用 CSS 会很有帮助...谢谢...