Is it not possible to place a large html table in a small space?

Question

The obvious answer to this is “it's impossible” or “make the data smaller” ... I tried them and they don't get erased, so I need to come up with an alternative

The webpage has a table with 14 columns. 2 columns have text that is quite long (but cannot wrap - the text should be all on one line for each row). Needless to say, the table disappears on the right side of the screen after column 9!

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

Bad answers:

• Reduce data volume
• Allow wrap text in lines to second line
• “It can't be done” - yes, I know, but somewhere, someone will have a brilliant answer or some kind of jQuery magic library that does such things.

Intriguing, but more information needed:

• Clear all columns enough to make the table fit, and then overflow the data that can be viewed when the column is expanded.

  For example: This is my data, but this ... |

Answer 1

Display the text with an ellipsis after the 10th character and display the tooltip text with the full text when the user moves the cursor over it ...

Ellipsis are three points ... I use them quite often ... Saw? ...

Answer 2

Show each logical line in two valid lines, making them clearly consistent using zebra stripes?

I can imagine situations in which this will work, but it is highly dependent on the data.

Answer 3

You can use horizontal accordion in a table if you need to expand only one column per row. Or you can do something like this answer (or even this ). In the demo, click the table heading to see the result.

Answer 4

Well, another possible solution: Switch rows and columns by placing column headings on the left rather than the top. You will have to scroll horizontally to scroll through the lines (but hey, scrollbars are useful), but each cell can use the entire width of the screen minus the width of the title bar.

Thus, switch the x-axis and y-axis of the table. Not really, but it might work.

Answer 5

Put the table in a div with overload: scroll. You will get horizontal scrollbars, but the table will look as intended. Example:

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

Answer 6

Try this as a CSS workaround. To get the desired result, you can use the overflow and word wrap properties.

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

Answer 7

I'll make a fisheye table like a Mac dock.

you can make the columns of the table very narrow (say 5px, allowing you to have more than 100 columns), and the most interesting thing is that when you hover over a column, it expands completely, and the columns on both sides of its side are half expanded, the following columns are expanded .. Little.

This gives you a nice navigation effect .. you can see an example here

_{(source: ndesign-studio.com )}

Answer 8

I would split the zebra according to John’s suggestion along with your own, cut off and displaying .... When the user hovers over the column, you could show a box with a full width a bit with full content. If you click when a window is displayed, it will not disappear when you move the mouse to another column so that users can copy / paste iterators.

Answer 9

Try implementing a tooltip control for columns that contain large amounts of text. For example, show only the first 100 characters, then insert some nice icon at the end of the line that appears, also a good looking tooltip containing the full text for this column. There are good jQuery tips that will do your job. This implementation will not spoil the appearance of your page, and it is quite flexible in terms of the large text that you show in the tooltip.

Answer 10

For nowrap columns, you can adjust them so that the text inside is contained in a div that moves to its absolute position and expands to the required width when you hover.

You can also use jggrid subgrid

You can simply open the jquery ui dialog for the onclick event of the row and have some of your data.

Answer 11

If I were in your position, I would think about rendering the table in an iframe. This way, you can easily get the full size table you want, the user will have to scroll to see these columns. You can attach a keyPress event to an iframe and attach these keystrokes to scroll if you think this makes it easier for users.

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

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

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

Good luck!;)

Answer 12

Perhaps this is another idea: try using BySlideMenu for Mootools.

This is a menu, but maybe it can be used for your table. See example number 4 and the following.

Answer 13

You can implement a fisheye grid like what I did with C # and WinForms:

alt text http://img523.imageshack.us/img523/9827/fisheye2b.jpg

This control is designed to display a table with 1000 columns and 1000 rows. I'm not sure if this would be possible with direct HTML and JavaScript. If you are ready to go to ActiveX, I can help you.

Answer 14

jqGrid may be a solution (under Advanced-> Resizing). I am not a big datagrids, but at least it allows me to resize, I have not tried it with a fixed-width table.

Answer 15

You may have text broken into several lines, and it still appears as one when you cut or copy. Use the wbr tag ( w ord br eak) .