Small Table, Big Information

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

• CSS
• SweetAlert
• Pug
• VueJS

Wayne