7

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

  • Maximum width: The table must not exceed 940 pixels.
  • Single Table: I can't 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?

7
  • 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, 2013 at 14:24
  • A better way to display tabular data considering the restrictions.
    – John
    Mar 26, 2013 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, 2013 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, 2013 at 17:12
  • And its not arbitrary, its exactly this number columns.
    – John
    Mar 26, 2013 at 17:47

3 Answers 3

9

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.

1
  • Man I really hate the first two options. Totally.
    – Pacerier
    Feb 6, 2014 at 13:29
2

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).

2
  • 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, 2013 at 13:27
  • @John To pivot the table actually eases comparison of measures (here: decimal figures) across larger dimensions (here: >10 columns compared to <10 rows) like in your example.
    – hc_dev
    Mar 30, 2021 at 21:55
0

Another way could be having ellipses at the end of the breaking text to signify continued text that's missing in the fixed column. On Mouse hover, produces a tool tip with the full text.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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