TFoot questions

HTML & CSS
1

Kind of a “Table” theme today! :smile:

1.) Is it correct that you use a < td > inside of < tfoot> ?

2.) In this code, I can’t left align my footnote…

    <tfoot>
        <td colspan="4">*Based on 2014 data.</td>
    </tfoot>

tfoot td{
    border: none;
    text-align: left;
}
2
  1. Yes but you have to wrap that <td> in a <tr>.
  2. Aligning left for me.
    http://codepen.io/ryanreese09/pen/XbraLX
3

According to FireBug, your nth-child is overriding my style above…

4

A real live webpage will make it easier for your styles to override my nth-child code. That’s not something you shoudl worry about.

5

So how would I get the tfoot td style to override the td:nth-child(4) style?

td:nth-child(1),
td:nth-child(3),
td:nth-child(4){
    text-align: right;
}

tfoot td{
    border: none;
    text-align: left;
    font-size: 0.8em;
}

P.S. Adding an id to < td > works, but I ffel like I am doing something wrong for the code above to not work as expected.

6

Using your HTML from your last post, and that updated CSS, I’m still seeing no issue. It’s left.

http://codepen.io/ryanreese09/pen/XbraLX

And why not just have one single nth-child(2n+1)? Instead of nth-child(2)/3/4 etc?

7

Because CSS is treating the footer like it is in Column 4 and so it gets right-aligned per the td:nth-child(4) style.

Because Column 1 is right-aligned, Column-2 is left-aligned, and Columns 3 and 4 are right-aligned.

I could do this, but it seems like half a dozen…

td:nth-child(1),
td:nth-child(1n+3){
    text-align: right;
}
8

Not trying to be mean, but do you know specificity in terms of CSS? Might want to google this subject to get a firm understanding why this works now.
http://codepen.io/ryanreese09/pen/XbraLX

9

@RyanReese,

Yes, I am familiar with the concept in CSS, and in Post #5 I stated that I got things working by adding an ID…

You did the same thing but chose a Class.

Guess I was hoping there was a way to fix things without having to add an ID or Class.

10

Oops, I missed that. My bad.

You don’t HAVE to add a class or ID but in a real world application you can do #table-ID-here td{}, etc. THere will be classes/ids on parent elements which will make it easy to override the nth-child stuff.

Not something to worry about during your tinkering around.

11

No problem - it was a P.S. anyways.

Yeah, I’m just being nitpicky and trying to write better CSS.

Good enough for now.

Thanks!

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.