Why I cant see hover effect?[Help]

Question

In this code, I have styled a table.
Some of things I don't know and some of them are not working.
1)When I set opacity to 1,I cant see hover effect.
2)How to use vertical align in this code.
3)I don't want to have hover effect in heading row.
4) I want to have top left border and top right border curved. How to use border-radius?
https://code.sololearn.com/Wif7oZFPwNyf/?ref=app

Answer 1

Hello !!
1) The Opacity describes how opaque an element is. An opacity value of 1 means the element is fully opaque i.e. not transparent which is its default value.

2) I didn't got your this question 😕. Where exactly do you want to use vertical align in your code ??

3) The not(:first-child) selector will be helpful in this case.
You can read more about it here : https://www.geeksforgeeks.org/how-to-use-a-notfirst-child-selector-in-css/
Your code will change to something like this :
tr:not(:first-child):hover{
opacity:0.9;
}

4) You can read about border-radius here :
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
I found it really helpful when I was learning about border-radius property.

Hope this was helpful ✌

Answer 2

You can add the border property in the th and td element to apply border across each cells.
Ex : td, th {
border : 1px solid #111;
}

Also the border-bottom property at line 8 won't be applied as the border property is again used in below lines. The last property overwrites the previous one.
And the border across the th element won't be seen as you haven't specified any style in th above.

Answer 3

Thanks for your help! I cleared some doubts and border is not working now. I want to have border across the row and columns.