An impossible problem - fitting a large html table into a small space

Question

The obvious answer to this is "it's not possible" or "make the data smaller"...I have tried these and they don't wash so I need to come up with an alternative

There is a table on a web page that has 14 columns in it. 2 of the columns have text in that is quite long (but cannot wrap - the text must be all on one line for each row). Needless to say, the table disappears off the right hand side of the screen after about column 9!

So, can aanyone think of a magical solution that will make this table fit fully onto the screen?

Bad Answers:

• Reduce the amount of data
• Allow the text in the rows to wrap onto a second line
• "It can't be done" - yes I know, but someone somewhere will have a genius answer, or some magical jQuery library that does this kind of thing

Intriguing but more information would be needed:

• Squish all of the columns down enough so the table fits, and then have overflowed data which can be viewed when the column is expanded

  eg: |This is my data but it's...|

Answer 1

Show each logical row in two actual rows, making them clearly coherent using zebra stripes?

I can imagine situations where that would work, but it's highly dependent on the data.

Answer 2

Place table in div with overload:scroll. You'll get horisontal scrollbars, but table will look as supposed. Example:

<div style="width:100%;overflow:scroll;">
<table>...</table>
</div>

Answer 3

I'd split and zebra as per Jon's suggestion together with your own, cutting off and displaying .... When the user hovers a cut of column, you could show a full width box a bit down with the complete contents. Clicking when the box is showing makes it not go away when moving the mouse to another column, so that the users can copy/paste etcetera.

Answer 4

Try to implement tooltip control for those columns that contains large amount of text. For example show just first 100 characters, then insert some nice looking icon on the end of the row, that will pop up, also a nice looking tooltip that contains full text for that column. There are nice jQuery tooltips that will do your job. This implementation will not ruin the look-and-feel of your page, and it's quite flexible in terms of ow much text will you show in the tooltip.

Answer 5

Try this as a CSS workaround. You can play with the overflow and word-wrap properties to get the desired result.

table { 
table-layout:fixed; 
width:100%; 
overflow:scroll; 
border:1px solid #f00; 
word-wrap:none; 
}

Answer 6

For the nowrap columns you could set them up so the text inside is contained in a div that goes to absolute position and expands to needed width when hovered over.

You could also use jqgrid subgrid

You could just the jquery ui dialog for the onclick event of a row and have some of your data in there.

Answer 7

You could use a horizontal accordion on the table if only one column in a row needs to be expanded at a time. Or, you could do something like this answer (or even this). In the demo, click on a table header to see the result.

Answer 8

You can have the text broken into multiple lines and it still comes out as one when cut or copied. Use wbr (word break) tag.

Answer 9

If I were in your position i'd consider rendering the table in an iframe. This way you could easily have the full table the size you want it, the user would have to scroll to see those columns. It is possible to attach a keyPress event to the iframe and hook those keypresses to scroll if you think it would make it easier for users.

The second option I can think of is to make all the cells a bit narrower such that there is a little spare space on the edge of the screen. Add a class to each element of the table stating which row it is in (this makes it easier to reference them together). Attach a click event to the table and use event.target to get the cell clicked on (this will eat less browser memory than attaching event to each cell). That click event will then expand the width of that column to display all the data and add a class label to the corresponding cell in the first row. Then next time a cell in that column is clicked the table could check in the first row if it is expanded and decide if it should contract back to original or expand. In such a large table users are probably only interested in correlations between a few columns at a time, this method has the advantage that only those columns of interest to them are expanded at any given time.

The third and final option I can think of is to use a humble div. Attach a click element as in the last paragraph, but this time have the event handler create a div over the cell of interest which is large enough to contain all the text and then make it disappear if that div is clicked on.

The most appropriate solution depends on how the users are going to want to use the table data. If you want code snippets for any of the above suggestions, just drop in a comment and/or send me an email.

Good luck! ;)

Answer 10

This is maybe a different idea: try to use BySlideMenu plugin for Mootools.

It is for menus but maybe it can be in use for your table. Have a look at the example no 4, and next ones.

Answer 11

jqGrid might be a solution (under Advanced->Resizing). I'm not a big of datagrids but atleast it allows resizing, I haven't tried it with a fixed width table however.

Answer 12

Well, another possible solution: Switch the rows and columns, putting the column headers on the left instead of the top. You would have to scroll horizontally to scroll through the rows (but hey, scrollbars are useful) yet every cell could use the whole width of the screen minus header width.

Thus, switch the X and Y axis of the table. Not pretty, but it could work.