I have a Twitter Bootstrap based table with responsive CSS. Everything looks good but, when I try to put more columns than the size of the table supports, I have a line breaking. I tried to change font size but, I think it would be strange or confusing for the user if I have different font sizes in each table, so I am in a dead end.

Some restrictions: The table must not exceed 940 pixels of width and I cant divide the information in multiple tables.

This is what I have:

enter image description here

Is there a better way to display tabular data considering the restrictions?

  • What is your actual question - how to stop it from line-breaking using CSS, or do you want to know if there is a better way of presenting tablular data responsively? – JonW Mar 26 '13 at 14:24
  • A better way to display tabular data considering the restrictions. – John Mar 26 '13 at 14:31
  • I think you have conflicting requirements (from my understanding of your description). The table cannot exceed 940 pixels in width. Assumed: You can have an arbitrary number of columns in the table. – Josh Bruce Mar 26 '13 at 15:40
  • Yes, i understand that i have conflicting requirements but the analyst didn't thought in the UX. So i have to find a way to expose this tabular data as a user friendly experience. – John Mar 26 '13 at 17:12
  • And its not arbitrary, its exactly this number columns. – John Mar 26 '13 at 17:47

First option, if you do not wish to change any other parameters, you can implement a horizontal scroll bar. It's not the best option, but, it does get you to show(?) the entire table with consistent size without exceeding the 940 pixel width.

Second option, make the columns movable. You wrap/crumple up the out of bound columns so as they only expand when the wrap/crumple is clicked on. This way, the user can customize the table to see only things he's interested in and the rest information is still available but, hidden away.

Third option, go down the path of information visualziation. If you are not hell bent on using a table, you can look into small multiples or multivariate charts like parallel plots, etc. depending on the type of data you have and the output you desire.

| improve this answer | |
  • Man I really hate the first two options. Totally. – Pacerier Feb 6 '14 at 13:29

Could you maybe just "turn" the table? It seems like you only have two rows and a lot of columns. Turning the table would make it long, but it would fit.

It would also give you more space for your values, possibly preventing them from wrapping (which makes them difficult to read / compare).

| improve this answer | |
  • 1
    Perhaps, but i think it will continue to be difficult to read or compare, and will not be only two rows, can be 1-10 before enable vertical scrolling. But anyway, thanks for your reply – John Mar 27 '13 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.