Small Table, Big Information

Post Date: 12/11/2018

Last Updated: 12/11/2018

Hello all!

In a tale as old as time itself, my customer wanted a lot of information available in a table format while being narrow enough to fit on a mobile device.

Problem

Using a standard HTML table causes overflow issues on smaller devices. Using an overflow: auto; CSS property works if you don't mind your users scrolling horizontally. This introduces a strange UX depending on the page layout. For instance on iOS devices a swipe left or right will take the browser backwards or forwards (respectively) in the history.

Solution

Display only the vital information in the table based on the screen size and move the remainder into a "more information" link or button. I used VueJS to manage the client side data in this example but you can use whichever technique you feel comfortable with. I display the extra information with a SweetAlert.

Code

https://codepen.io/wboka/pen/xJqyMd

Technologies Used

Wayne


More Posts

ColdFusion isDate() Validation Quirks

Published on 12/18/2018

Read Blog Post

Website Development by Wayne Boka, Web Developer

© 2020-2021 Wayne Boka, All Rights Reserved