From the course: HTML: Tables

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Solution: Make tables responsive

Solution: Make tables responsive - HTML Tutorial

From the course: HTML: Tables

Start my 1-month free trial

Solution: Make tables responsive

(upbeat music) - [Instructor] So how'd you do? Hopefully you were able to make a responsive weekly time sheet, I'll just show you how mine looks, so that's the table as we had it styled before. As I start to shrink the screen down, eventually we do get into the format here where we've got everything stacked on top of each other, and notice that I've changed some of the text down here on the bottom to make this work a little bit better. I'll show you all of my secrets here in just a moment. So that's how I styled my particular version of this time sheet. So let's go and through my HTML, my CSS, here is that scrollbar that I attached to the top of the page, and I called this the timesheet, so the caption has the ID of timesheet, that's the only change that I've made to the HTML, and the CSS, everything outside the media query is the same as it was before. Here inside the media query I've gone ahead and, from this comment of responsive table, I guess this table scroll is actually outside…

Contents