From the course: HTML: Tables
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Reformat a table for responsive layout - HTML Tutorial
From the course: HTML: Tables
Reformat a table for responsive layout
- [Instructor] While a side scroll bar is okay for some tables, there are still a ton of drawbacks in terms of reading a table on a mobile device, especially for a larger table. Let's instead use CSS to make this table appear more like a report than a table when we get to smaller screens. Normally, when building this kind of code, we do what's called mobile first. That means that the mobile version of the code is the default outside of the media queries, while the larger screen CSS is hidden inside a media query. However, when you're doing this type of work with a table, it actually works better to use desktop first. In other words, the desktop styles are outside of the media query and the mobile version of this display will be inside the media query. The reason why is you'll wind up writing less code in the end, and it will be more straightforward to understand what's going on. You can, in fact, build your table this way using a desktop first approach, even if the rest of your site…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.