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.


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.


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.


Technologies Used


More Posts

ColdFusion isDate() Validation Quirks

Published on 12/18/2018

Read Blog Post

Website Development by Wayne Boka, Web Developer

© 2020-2023 Wayne Boka, All Rights Reserved