Assessment wanted for tables skill

MDN Learn
, ,
#1

Under table styling so far I think I have tried done well with everything. However, I have failed to [text-align: right; ] the data under the heading No’ of Albums. I would love to get some suggestions on how I can accomplish that.

Here is a link to the glitch page where I did the exercise.

And here is what the exercise look like on MDN

Thanks Again for your Help.

1 Like
#2

Hey there,

Great work! :tada:

The reason the text is not right aligned for the number of albums is because this rule, tbody th + td only targets the first td element that is a sibling of the th. This means it will not affect the td elements under number of albums.

I created a Codepen based on your example. To address the problem you are facing I create a class called numeric-cell and applied it to all table cells where I wanted the text to be aligned right.

This also means I could remove these lines of CSS:

thead th:nth-child(1) {
  text-align: left;
}

thead th:nth-child(2) {
  text-align: right;
}

thead th:nth-child(3) {
  text-align: right;
}

thead th:nth-child(4) {
  text-align: left;
}

tbody th + td {
  text-align: right;
}
1 Like
#3

Hello,
Thanks, man for the tip. This was really helpful.

1 Like
#4

You are very welcome.