ISTA 230 Introduction to Web Design (Spring 2017)

Responsive Tables

Tables can be troublesome, particularly in a mobile context. The combination of table's inability to scale themselves down and the small screen size provided by most mobile devices usually results in horizontal scrolling. There are ways to avoid this however. You have been provided with a basic responsive design that includes some styling for tables. Using your understanding of CSS 3 and HTML 5, your goal is to implement responsive tables.

You can download the exercise files here. When viewed on screens larger than 800px wide, the table should display as expected. On smaller screens:

Solution

Solution can be downloaded here.