• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 206
  • Last Modified:

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?
0
intoxicated_curveball
Asked:
intoxicated_curveball
  • 4
  • 2
1 Solution
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now