Responsive Tables Layout Exercise

[00:00:00]
>> Jen Kramer: This is the you try it portion of the exercise. So I have given you the way I'd like the tables to look. And again, they're not projecting very well, be sure you take a look at it in your files. This is the way it should look at extra large sizes, okay?

[00:00:14]
So we have some footnotes over here in a column on the side. Hint hint, maybe the inside layout will work well here, okay? And then as we go down to the larger, notice that I'm breaking this a little bit sooner, okay? And then we have this lovely scroll bar that shows up down here at the bottom, remember how we put that in, okay?

[00:00:35]
When we go down to medium, then it is gonna stack on top of each other, next to the bar with the footnotes. And then finally, when we go down to small, then everything stacks, okay? So now, I had some pro-pointers here for you in the instructions. So I wanna be sure to go through those with you also.

[00:00:59]
So first of all, remember, the first hint is there's a page layout and there's a table layout. Both of those are responsive, okay? So the trick is to combine your page layout with your table layout together so that everything works together, it'll work correctly on the page, makes sense?

[00:01:18]
Okay, so that's first of all. Second of all, you may need to override some of the inside page layouts that you already did for the book. You may need to override some of those in order to make this work for your table, makes sense? Okay, so my suggested approach is as follows.

[00:01:33]
So first of all, determine where the right column can be next to the table and where it needs to move under the table. Okay, so style that first. Then make the table stretch fully across the page as soon as you start to wrap that aside under the table.

[00:01:48]
Because what you'll find is that the table will stretch only so far, it won't stretch fully across the page, you'll see it when you get there. You wanna make sure that table stretches all the way across. And then when the table no longer stretches across the page, then disassemble it the way I just showed you how to do it, and turn it into a report.