title: Opacity issue in sticky table header structure
body: <p>I have created fiddle for reference :- <a href="https://jsfiddle.net/orbs4g07/5/" rel="nofollow noreferrer">FIDDLE</a>.
  In this i have table structure and i want stick the table header on top of page, so for that i have used <code>translateY()</code> you can check it on <strong>FIDDLE</strong>.
  Now on first column there is checkbox with <strong>opacity: 0.3</strong>. </p>
  
  <p>Now when i scroll the table and any check box of <strong>tbody</strong> is overlapped with checkbox of <strong>thead</strong> then i am not able to check the thead checkbox. </p>
  
  <p>I have also created video of problem :- <a href="https://drive.google.com/file/d/143dfHv1ji5o89xKq6aGNyrvaoq4qeBFN/view" rel="nofollow noreferrer">VIDEO</a>. if there's <strong>opacity</strong> less then one and then if you try and overlap the checkboxes, then the thead checkbox won't be selected. If i use <strong>opacity:1</strong> it is working fine. Even if i give the <strong>z-index</strong> to header's check box it is not working. <strong>NOTE :-</strong> I cant remove or change the input opacity</p>