Responsive design best practice for wide content

I am working on converting our site to a responsive site. I have created a few break points based on browser width. It works quite well until certain content elements gets in the way...

For example on the page there is a table that is set to 100% width and it has 5 columns in it

i.e. |column1|column2|column3|column4|column5|

Because the column text has no break points the table can not be less then 500px wide (for example). So the table width is exceeding the body width (I have my minimum body width set to a standard 320px).

What is best practice in this case? How to adjust/scale the table to fit the width of the page down to the minimum 320px?
intoxicated_curveballAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
If you're referring to <table> elements, they're not responsive.

If you're referring to other elements then how are you coding your site?  Are you using bootstrap or doing it yourself?
0
intoxicated_curveballAuthor Commented:
Table elements are not responsive? Actually they are in terms of scaling and size, just like anything else. But this is an example as some of the content pages contain tables with tabular data.

I'm using my own code.
0
intoxicated_curveballAuthor Commented:
I have solved my problem. I will just apply an outer div to the table and use overflow scroll.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

RobOwner (Aidellio)Commented:
Yes you can resize them sure but that's not responsive IMO.  Responsive is about displaying content on all devices in a readable fashion.  Wrapping the table in a div with scrollbars would drive me crazy if I had to look at it on my phone.  I understand you have tabular data but it could be formatted differently and still retain the "tabular" idea.

You should have a read of this article as it explains exactly why scrollbars is a bad idea: http://css-tricks.com/responsive-data-tables/
0
intoxicated_curveballAuthor Commented:
Rob Lurd: At the time it was the best solution I had come across. Actually I found a better solution which is simply to use table-layout: fixed. This ensures the width of the table always is no more then the width of the page. And to solve the issue of content being longer then the cell width I'm using overflow scroll, this only appears in rare cases.

The link you provided is not a suitable solution as it involves applying Table header content at the CSS level, which is impossible when you are dealing with a site containing hundreds of tables.
0
intoxicated_curveballAuthor Commented:
I found the solution
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Responsive Web

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.