Post Date: 12/11/2018
Last Updated: 12/11/2018
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.