Opacity issue in sticky table header structure

Question

0.00/5 (No votes)

See more:

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

Posted 29-Dec-17 1:35am

VandanShah

Updated 10-Jan-18 4:40am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 12656556 · Accepted Answer · 2018-01-10T04:40:00

Solution 1

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.

Posted 10-Jan-18 4:40am

Member 12656556

Updated 10-Jan-18 4:41am

Comments

VandanShah 11-Jan-18 7:32am

If there is horizontal scrolling then it will not be scrolled horizontally.
See the fiddle :- https://jsfiddle.net/orbs4g07/9/
you can see there I have given 10000px width but because of position fixed it is not increasing more than that... I want to put the same width of thead cells and tbody cell I can't do that using that... Is there any solution for it?

Member 12656556 15-Jan-18 11:20am

Hi
I m find solution for this one-https://jsfiddle.net/orbs4g07/5/ .Just add this two lines in css.Opacity problem will solve.

#table_header {
z-index:2;
}
#table_header input {
opacity:1;
}