粘性表头结构中的不透明度问题 [英] Opacity issue in sticky table header structure

问题描述

我创建了小提琴供参考： - FIDDLE 。在这里，我有表结构，我想把表头保持在页面顶部，所以为此，我已经使用translateY（）你可以在FIDDLE上检查它。现在在第一列，有一个不透明度的复选框：0.3。



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



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



我尝试过：



小提琴

解决方案

我看到你的代码在小提琴中

我觉得问题是转换所以我只删除脚本并且我添加了css来实现它

 #table_header {
 z-索引：1; 
} 
 #table_header输入{
 opacity：1; 
} 
 #table_header {
 position：fixed; 
 top：0; 
} 
 #table_header td {
 margin-bottom：15px; 
} 
 tbody tr：first-child td {
 padding-top：17px; 
} 

这里我使用的是固定头部而不是变换的位置，我使用z-index来解决重叠问题。试试这段代码它会很有用。谢谢你

I have created fiddle for reference :- FIDDLE. In this, i have table structure and I want to stick the table header on top of the page, so for that, i have used translateY() you can check it on FIDDLE. Now on first column, there is a checkbox with opacity: 0.3.

Now when I scroll the table and any checkbox of tbody is overlapped with a checkbox of thead then i am not able to check the thead checkbox.

I have also created a video of the 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 checkbox it is not working. NOTE:- I cant remove or change the input's opacity

What I have tried:

Fiddle

解决方案

I see your code in fiddle
I feel problem is transform so just i remove script and i added css to achieve that

#table_header{
  z-index:1;
}
#table_header input{
  opacity:1;
}
#table_header {
  position:fixed;
  top:0;
}
#table_header td{
  margin-bottom:15px;
}
tbody tr:first-child td {
    padding-top: 17px;
}

Here i am using position fixed for header instead of transform and i used z-index for overlap issues.Try this code it will useful.Thank you.

这篇关于粘性表头结构中的不透明度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！