I am doing a proof of concept with responsive design. One web page that I am modifying has some extremely wide tables. I really don't know how to shrink the tables width so there is no horizontal scroll bar in a mobile browser.
I was just wondering if anyone had the same issue with wide tables and what they did to overcome a horizontal scroll bar in a mobile browser using responsive design. Oh and I wanted to add that I can not hide columns in the table.
Answer
You have two ways out of this situation:
Option 1: Group the data, so that instead of presenting data for row 1 in 10 columns, you actually use 1 column with the data printed out in paragraphs, e.g.:
John Doe
Name: John
Surname: Doe
Email: johndoe@johndoe.com
Phone no.: 1234567890
This data usually would be split in 5 columns on bigger screens.
Option 2 is to leave tables as they are and make them only swipe-scrollable horizontally.
No comments:
Post a Comment