Responsive Tables Layout Solution

[00:00:00]
>> Jen Kramer: All right, so going through this table answer here, we'll go ahead and put this in.
>> Jen Kramer: Drop this on down here. So I went ahead and put in a main with an ID of table down here in our HTML. Here's our little blah blah that's gonna start us off here.

[00:00:17]
A citation. And then, we have the div here with that scroll that I talked about earlier, so there is the scroll added there. We have our accessibility additions put in here to this table for planned data and the fact sheet caption.
>> Jen Kramer: And then, we have a whole bunch of different table cells here, okay?

[00:00:42]
>> Jen Kramer: So that's pretty much what's going on over here in the HTML. There's a thead, there's a tbody, it's pretty much what we saw in the code pen, all right? And then, over here in our CSS,
>> Jen Kramer: So what we have is
>> Jen Kramer: First of all, of course, we dissolve the whole thing as we had done before, so there's all that.

[00:01:06]
Pretty much basically what you saw in code pen before. We have different words here in our content before, right? So, there's that.
>> Jen Kramer: I have my font size calling in my variable for my caption, instead of just coding in something hard, okay? And then here, where we get to our media queries

[00:01:33]
>> Jen Kramer: Once again, changing my font size on my caption.
>> Jen Kramer: And then, some generic page styling down here. So that's the table CSS. So that's how the tables are dealt with. Pretty much the code pen solution that I showed you before, the layout will change a little bit as well.

[00:01:51]
Because of course, we can just plug this right on into our inside article and so forth is here.
>> Jen Kramer: And as we scroll down here,
>> Jen Kramer: Here we go, I think my big change was down here at the bottom. So I said for my inside page table in the article, I set my width to 12 for the main portion of it, and 4 for the other.

[00:02:23]
And then, that wound up getting changed, I think, in the first media query. Here it is, right here. Sorry, it's in the second media query. The 950 pixel media query. Here, we have the inside table article and the inside table aside set to the same width. So that's basically what I did.

[00:02:41]
If you had different numbers for your various widths of the screen and so forth, that's all good.