Building responsive tables

Responsive design is the web designers reaction to the ever increasing number of …different screen sizes that web sites must be viewed on. …In a responsive design headings, columns, and even images re-size proportionally …when viewed on tablets and phones. Tables, if not addressed, can shrink to …unreadable sizes, the table data all squished together. …In this lesson, I'll show you one method for handling tables responsivively. …First, let's take a look at the problem. I have open in my browser, the …profile.htm file. I'm going to grab the screen edge over on …the right-hand side and begin to narrow it.…

As I do, you can see the columns are resizing, as are the images. …Even the table does okay, because its width is set to 100% for most of the …time, but watch what happens as I get to the smallest size. …As you can see much of the table is forced together, it's not as bad as it …could be, but it's certainly not as readable anymore. …Now, let me show you, the solution that we're going to implement. …