Tables skill test assessment

Page: Test your skills: Tables

Task: https://codepen.io/user_un/pen/wvYMzNM

In the CSS file, selectors in line 17-20 are aligning headings and data for columns containing numbers right. Is there a shorter or better way to target (select) them? Writing 4 lines for that feels like writing bad code.

Hi @user.dev and welcome to the community :wave:

You could reduce all the left/right alignment rules to the code below, but I think that about the most reduction you could get.

tr :nth-child(2),
tr :nth-child(3),
tfoot th {
  text-align: right;
}

tr,
tfoot :nth-child(2) {
  text-align: left;
}

There’s another possibility to style entire columns, but only a few properties are supported (border, background, width, visibility). Therefore this wouldn’t work with text-align, but maybe it’s helpful in another situation: <colgroup> and classes on individual <col>s inside.

I hope that helps, :slightly_smiling_face:
Michael

PS: Your email address is visible in your post. It ended up in the optional “name” field of your profile. I recommend removing it.