问题
I have created fiddle for reference :- FIDDLE.
In this i have table structure and i want stick the table header on top of page, so for that i have used translateY() you can check it on FIDDLE.
Now on first column there is checkbox with opacity: 0.3.
Now when i scroll the table and any check box of tbody is overlapped with checkbox of thead then i am not able to check the thead checkbox.
I have also created video of problem :- VIDEO. if there's opacity less then one and then if you try and overlap the checkboxes, then the thead checkbox won't be selected. If i use opacity:1 it is working fine. Even if i give the z-index to header's check box it is not working. NOTE :- I cant remove or change the input opacity
回答1:
Weird bug. It seems to be be solved by placing <thead> below <tbody> in the html source.
https://jsfiddle.net/euejc4kg/
So it has to do with stacking/order, I figured I might fix it by setting translate3d or anything on the tbody as well but that didn't seem to fix it. But maybe that's something someone else can work with.
Another option might be to use labels on top of the checkboxes and not have pointer events on the checkboxes at all.
回答2:
Here's a (hacky) workaround for Chrome...
Create the opacity effect using a psuedoelement on top of the inputs and set 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>来源：https://stackoverflow.com/questions/47923240/opacity-issue-in-sticky-table-header-structure