CSS-Tricks Example

Non-Responsive Table

Go to Responsive Table

This is a regular ol' data table with regular ol' (yes, semantic) table markup. This particular table can only shrink to about 760px in width before it simply can't get any narrower. This poses a problem for small/narrow screens (like on mobile devices). The choice is to zoom out to see the whole table (at which point the text is too small to read) or zoom into the point of readability (which means both horizontal and vertical scrolling to browse the table). Not good either way.

First Name Last Name Job Title Favorite Color Wars or Trek? Porn Name Date of Birth Dream Vacation City GPA Arbitrary Data
James Matman Chief Sandwich Eater Lettuce Green Trek Digby Green January 13, 1979 Gotham City 3.1 RBX-12
The Tick Crimefighter Sorta Blue Wars John Smith July 19, 1968 Athens N/A Edlund, Ben (July 1996).
Jokey Smurf Giving Exploding Presents Smurflow Smurf Smurflane Smurfmutt Smurfuary Smurfteenth, 1945 New Smurf City 4.Smurf One
Cindy Beyler Sales Representative Red Wars Lori Quivey July 5, 1956 Paris 3.4 3451
Captain Cool Tree Crusher Blue Wars Steve 42nd December 13, 1982 Las Vegas 1.9 Under the couch