Table Title & Media Queries

[00:00:00]
>> Jen Kramer: So nice look at that now we can actually read this and get information out of it. How cool is that? Pretty sweet.
>> Jen Kramer: Okay, so our tables totally destroyed and then we have to bring it back again. The other thing that's missing here is this caption is a little odd.

[00:00:22]
>> Jen Kramer: So, for the caption we can go ahead and say that the font-size: is 1.5rem or whatever font size that you happen to have from your type scale, right, plug it right in here. And we can say the text-align: is left and the font-weight: is bold and the margin: is 1rem auto.

[00:00:47]
And I did notice this as I was working through some stuff, it's still a bunched over here on all the way over like this. And it's basically what it's doing is it's in line with the other cells that are here and it's not stretching the full width across this.

[00:01:02]
How are you guys doing?
>> Speaker 2: Is this captions not displaying as block right now, right?
>> Jen Kramer: That could be.
>> Jen Kramer: There we go, that's what I was doing thank you. Display block, okay?
>> Jen Kramer: Nice.
>> Jen Kramer: How are we doing? Good, are you happy? Isn't that a much nicer thing to read?

[00:01:31]
>> Jen Kramer: Okay, well you destroyed it now you gotta fix it because that's the way it works, right? So, if when we come back then to our media query we gotta put it all back again.
>> Jen Kramer: I'm just picking randomly 600 pixels, obviously, it can be any value that you like.

[00:01:54]
This is the point where we're gonna re-display this actually as a table. And so, the first thing that your gonna wanna do is you're gonna wanna go to your thead tr which we positioned off screen, right? So now we're gonna put it back to position: of static. And when you do a position of static that will actually bring it right back on screen and you don't even have to reset left and top.

[00:02:20]
By definition left and top are not definable properties with the static, when the value of the position is static, so the headings will come right back.
>> Jen Kramer: Then we can reset our thead and our tbody, these are display values you probably aren't familiar with but this is what they are, table-row-group, okay.

[00:02:47]
>> Jen Kramer: Our th and our td: are display: of table-cell.
>> Jen Kramer: Getting better and better.
>> Jen Kramer: Our tr is a display: of table-row,
>> Jen Kramer: And our table is shockingly a display: of table.
>> Jen Kramer: We may wanna do some other things at this point. We might wanna do a text-align:,

[00:03:39]
>> Jen Kramer: Left for those headers that makes them a little easier to read, okay.
>> Jen Kramer: What's the other thing we're gonna have to do? Anyone notice?
>> Speaker 3: Remove the before and afters.
>> Jen Kramer: Remove our before and afters. So, the way that I did that,
>> Jen Kramer: Was I did this I said td:nth-of-type,

[00:04:06]
>> Jen Kramer: (Odd):, if somebody has a better way of doing this please tell me, before, td:nth-of-type,
>> Jen Kramer: (Even):before. Wasn't sure how I could get all of the nth-of-types and this seemed like the fastest way to get them all, we'll do both odds and evens, that's why I've spelled them out.

[00:04:31]
By the way, if you just say td:before where you were like why aren't you doing that, Jen? It will actually not be as specific, right? Because the specificity for this very long selector that I had before up here has a pseudo class in it, a pseudo element, and an HTML tag.

[00:04:51]
As opposed to down here if I just said td:: before the specificity is actually very low for that.
>> Speaker 3: Since you know that the td's are inside of a tr could you target td's inside of a tr would that be more specific?
>> Jen Kramer: Again, well, we could try it.

[00:05:10]
Let me finish my thought and then we can try that. I suspect not, but-
>> Speaker 4: No.
>> Jen Kramer: Okay. Yeah, td:nth-of-type,
>> Jen Kramer: (Odd) once again, ::after, and td:nth-of-type,
>> Jen Kramer: (Even):: after. Okay, then we could finally say, content:,
>> Jen Kramer: Double quotes.
>> Jen Kramer: Phew, that turns it all off.
>> Jen Kramer: Okay, now, one other thing that's going on here and it has to do with our striping.

[00:06:03]
So if you will take a look our style here for our striping,
>> Jen Kramer: Where's the striping? There it is. So we said tr:nth-child, let me make this a little bit darker so you can see it up here on the screen.
>> Jen Kramer: Okay, this is ridiculously dark okay, but I want you to be able to see what's happening here.

[00:06:28]
So we told it tr:nth-child(odd), but yet the first and the second rows are both colored the same way. Anyone have any idea why that is?
>> Speaker 3: The table head and the table rows are considered-
>> Jen Kramer: Correct.
>> Speaker 3: Okay.
>> Jen Kramer: Yeah, the table head and the table rows, so it's numbering, we're doing the odd and even thing based on that.

[00:06:54]
So we have the thead this is an odd it's the first one right? And then we go on to the tbody and there's the first one there, so we wind up with two of the same color. So we may wanna change this odd to an even, right?
>> Jen Kramer: That's one possible, well, actually they're both the same there too.

[00:07:12]
Or the other thing that you could do would be to say that your thead tr: can actually technically, eh that's good enough, just like that. Then we could say it's a color of whatever background color of some other color.
>> Jen Kramer: There, terrible choice of color but there you go it at least projects.

[00:07:42]
Okay, so there we go, so our header is slightly different than the striping in the rest of the document. Make sense?
>> Jen Kramer: So we totally broke our table and then we had to reassemble it,
>> Jen Kramer: Cuz that's the way Mobile-first works. Yes?
>> Speaker 5: From that you can just get rid of the odd and even-

[00:08:07]
>> Jen Kramer: Yeah.
>> Speaker 5: In the after,
>> Speaker 5: And before.
>> Jen Kramer: So you just said, down to there that one. So you just said nth-of-type:before just like that?
>> Speaker 5: Just n like the for letter t's n.
>> Jen Kramer: N?
>> Speaker 5: Yes-
>> Speaker 5: N minus-
>> Jen Kramer: Right.
>> Speaker 5: 1 or n plus 1 just [INAUDIBLE]

[00:08:29]
>> Jen Kramer: There we go. That's a great solution, I like that much better just plain old n. Thank you, that selects everything.