Hi everyone, would you check my CSS style code that i applied for the following requirements below : Instructionsless
Steps:
The table should be styled using at least four properties
The table headings should have a border, background color, and at least one other property.
Style the table so that the text in the first column is left-aligned and the text in the other two columns is centered
Set the opacity of the table rows to a value between .6 and .8 (make sure it is still visible)
Change the opacity of a row when it is hovered over
The table elements < td > should be styled using at least four properties
Notice
HTML Code provided by the instructor and we are not allowed to change it
My question is about the hovering part , i tried to apply .right tr td{ but i noticed that my th have been effected by the opacity element which it should not be, that’s why i applied tr td{ for the hover part , but a gain i noticed that when i hover around my table row the text become visible only on the part where i am pointing my mouse and not the entire row which what i have to do?
Thank you for your help in advance
I apologize for being slow. I carelessly made two copies of your CSS and spent an embarrassing length of time working with the wrong copy. I now have a revision that works properly but would like to discuss some details with you.
Yes it works but if you notice not the entire row appear with bold text and black color, i have to make the entire row when i hover on it appear to apply the following elements on it
1- opacity: 1;
2- color: #000;
3- font-weight: bold;
4-font-size:90%;
5- line-height: 40px;
also the table header should not be effected by the opacity element
Mr. C. enjoys CSS. He gave you a little more than you requested, not less.
However, on the subject of the hovered cells, I would like to make the following points which you may have heard before from PaulOB.
It is poor styling to change a font on :hover in any way that causes it to jump. In addition to looking amateurish, the movement can be very disturbing to some users. So changing the font-size, line-height, font-weight are not recommended. Are you sure that you want to change those particular styles?
Combining @coothead’s and yours Codepen to work as the assignment requires:
/* here how i created my background Row and i set the opacity to 0.6 */
tr {
opacity: 0.6;
}
tr td {
padding: 0.25em 0.5em;
border: 1px solid #cbc2b4;
background: #bcbcbc;
font-size: 90%;
line-height: 40px;
}
/* here how i changed the opacity of the text to be visuble when somone hover */
tr:hover {
opacity: 1;
}
tr td:hover {
color: #000;
font-weight: bold;
}
Ok The instructor ask us to do that in a video that i cant sure it here, she said we have to make our row text to be bold, changing the font-size, line-height and the color when we hover around the row
Because you have a badly structured html table with no thead element (just an anonymous tbody element which the browser adds automatically) then you make it harder to style nicely.
Using code borrowed from above you can change the tr except for the first-child which is your th elements.
e.g.
/* here how i changed the opacity of the text to be visible when someone hover*/
tr:not(:first-child) td {opacity:0.6;}
tr:not(:first-child):hover td{
opacity: 1;
color: #000;
font-weight: bold;
font-size:90%;
line-height: 40px;
}
That will accomplish your task but is not the recommended way to construct a table as you are missing the thead element yet you style it to look like a thead element when its not. (If you use devtools and view the generated html you will see that the browser adds a tbody element around all your rows showing that it regards the table as having no thead element).
Also as Ron said the technique of increasing the font-size is ok for learning practice but something you would never ever do in real life which is why I find it a shame that it is taught in this way. There are many other properties you could change to enhance your skills while doing it correctly and efficiently.
Didn’t intend to. What I wanted to suggest was to move the font-size and line-height to the td keeping the black and bold on hovering the td in order to avoid the bold and line-height to affect the cell height.
I now see you only intended the opacity to change for the whole row.
Sorry for not testing first.
The better working combo applied only to cells when hovering a row:
/* here how i created my background Row and i set the opacity to 0.6 */
tr td {
opacity: 0.6;
padding: 0.25em 0.5em;
border: 1px solid #cbc2b4;
background: #bcbcbc;
font-size: 90%;
line-height: 40px;
}
/* here how i changed the opacity of the text to be visuble when somone hover */
tr:hover td {
opacity: 1;
}
td:hover {
color: #000;
font-weight: bold;
}
Back to keyboard I see @PaulOB already made the same suggestion, though he let the line-height stay on the hover state.
Thank you @PaulOB, i still remember your advice when i made the nav bar, also If it’s OK i would like to change in the html but not for this assignment for my self to do the good practice and share it with all of you guys for your notice and advises because i want to learn the right way. I will not share that today but for sure tomorrow . If that Ok?
