Question

I have an HTML table displaying a lot of columns in a single row (~25) and the table is stretching way beyond the size of the page and causing scrollbars. This is expected but undesirable behaviour.

I am looking for a way to shrink the content of each column with a way of stretching the columns larger if needed.

So currently a row in my table would look something like this:

information1 | information2 | information3 | information4 | information5

Desired functionality would be something like this:

infor… | infor… | infor… | infor… | infor…

With each of those columns the ability to be stretched out or hovered over etc… to see the full content. I have seen a few jQuery plugins like zentable and ingrid which allow the column resizing but not the concatenation as far as I know to fit all the content of the table in the parent element without scrollbars.

Answer 1

Are you looking for ellipsis? That’s when the text is truncated and followed by dots……

Add ellipsis if the text overflows the container:

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;

This fellow provides more detail about it.