# Help with styling table

**URL:** <https://discourse.mozilla.org/t/help-with-styling-table/62980>\
**Category:** Learn\
**Created:** [July 1, 2020, 12:26pm UTC](https://discourse.mozilla.org/t/help-with-styling-table/62980 "2020-07-01T12:26:17Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![notAcat](https://avatars.discourse-cdn.com/v4/letter/n/ba9def/32.png) [@notAcat](https://discourse.mozilla.org/u/notAcat)\
**Post date:** [July 1, 2020, 12:26pm UTC](https://discourse.mozilla.org/t/help-with-styling-table/62980/1 "2020-07-01T12:26:17Z")

</div>

I’m doing this exercise and have met some problem.

This is relevant html part.

```auto
<tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>

```

I’m trying to make th aligns right and td aligns left.  
So I write style in this way:

```auto
tfoot th{
       text-align: right;
}
tfoot td{
       text-align: left;
}

```

But it doesn’t work. I wonder why.

> **[Test your skills: Tables - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Tables_tasks)**
>
> The aim of this skill test is to assess whether you understand how to style HTML tables in CSS.

---

<div class="post-metadata">

**Author:** ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)\
**Post date:** [July 1, 2020, 1:02pm UTC](https://discourse.mozilla.org/t/help-with-styling-table/62980/2 "2020-07-01T13:02:05Z")

</div>

Hello @notAcat

hope that everything going fine with you

do you mind if you share your code in [https://codepen.io](https://codepen.io) or [https://jsfiddle.net/](https://jsfiddle.net/)

thanks and have a nice day

---

<div class="post-metadata">

**Author:** ![notAcat](https://avatars.discourse-cdn.com/v4/letter/n/ba9def/32.png) [@notAcat](https://discourse.mozilla.org/u/notAcat)\
**Post date:** [July 1, 2020, 1:28pm UTC](https://discourse.mozilla.org/t/help-with-styling-table/62980/3 "2020-07-01T13:28:33Z")

</div>

No problem.

[codepen](https://codepen.io/bipubipu-the-decoder/pen/GRoOGLJ)

Thank you!

---

<div class="post-metadata">

**Author:** ![notAcat](https://avatars.discourse-cdn.com/v4/letter/n/ba9def/32.png) [@notAcat](https://discourse.mozilla.org/u/notAcat)\
**Post date:** [July 1, 2020, 1:50pm UTC](https://discourse.mozilla.org/t/help-with-styling-table/62980/4 "2020-07-01T13:50:08Z")

</div>

I think I know the reason now. Specificity.  
:nth-child is pseudo class, which is more specific than element.

---

<div class="post-metadata">

**Author:** ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)\
**Post date:** [July 1, 2020, 2:57pm UTC](https://discourse.mozilla.org/t/help-with-styling-table/62980/5 "2020-07-01T14:57:23Z")

</div>

excellent @notAcat

i used the following update to your code

thead th:nth-child(2),tbody td:nth-child(2),thead th:nth-child(3),tbody td:nth-child(3){  
text-align: right;  
}

thead th:nth-child(1),tbody th:nth-child(1),tbody td:nth-child(1),thead th:nth-child(4),tbody td:nth-child(4){  
text-align: left;  
}

then your tfoot tr rule will work fine

hope that help and have a nice day

---

<div class="post-metadata">

**Author:** ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)\
**Post date:** [July 1, 2020, 3:01pm UTC](https://discourse.mozilla.org/t/help-with-styling-table/62980/6 "2020-07-01T15:01:42Z")

</div>

another thing to help you cause i get cought by those error sometime is to inspect the item to see is your selector apply to it or no and also to see if there to rule competing to each other and one overrule the other one and ofcourse my million misstype error 🙂 that’s why i like to use IDE or text editor to help me

have a nice day

---

<div class="post-metadata">

**Author:** ![notAcat](https://avatars.discourse-cdn.com/v4/letter/n/ba9def/32.png) [@notAcat](https://discourse.mozilla.org/u/notAcat)\
**Post date:** [July 2, 2020, 3:57am UTC](https://discourse.mozilla.org/t/help-with-styling-table/62980/7 "2020-07-02T03:57:06Z")

</div>

Or I can change the tfoot rule

```auto
tfoot tr :nth-child(1){
text-align: right;
}
tfoot tr :nth-child(2){
text-align: left;
}

```

I understand what you said about CSS debugging tricks. MDN happens to have one chapter too.

> **[Debugging CSS - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS)**
>
> Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. Perhaps you believe that a certain selector should match an element, but nothing happens, or a box is a different size than you expected....

---

<div class="post-metadata">

**Author:** ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)\
**Post date:** [July 2, 2020, 4:53am UTC](https://discourse.mozilla.org/t/help-with-styling-table/62980/8 "2020-07-02T04:53:41Z")

</div>

well done and this also and it even better than my idea ad use a less code

have a nice day 🙂

---

<div class="post-metadata">

**Author:** ![notAcat](https://avatars.discourse-cdn.com/v4/letter/n/ba9def/32.png) [@notAcat](https://discourse.mozilla.org/u/notAcat)\
**Post date:** [July 2, 2020, 5:14am UTC](https://discourse.mozilla.org/t/help-with-styling-table/62980/9 "2020-07-02T05:14:10Z")

</div>

Thanks! Have a nice day too!

---

<div class="post-metadata">

**Author:** ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)\
**Post date:** [July 2, 2020, 5:16am UTC](https://discourse.mozilla.org/t/help-with-styling-table/62980/10 "2020-07-02T05:16:38Z")

</div>

you welcome and thanks