Hide/show content in table cell

Question

I've got a HTML table and in one of the cells there is a lot of text. Is there a simple way to hide the content and when I hover this exact cell the whole content shows up? Like just show the first 10-20 characters or something. And then when I hover that cell the whole content shows up.

Can I do this in a simple way with just CSS or do I need JavaScript etc?

You can show content on hover, check [here](http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css) — alexanderkustov, Aug 27 '13 at 20:37
Thx! But if I want to still show the content if I hold the mouse in the table cell. The guide you linked to just shows how to show contant when hover a link. How does this work with a table? I want to expand the cell and show the whole content until I move the mouse outside the table cell. Do you know how to do this? — Treps, Aug 27 '13 at 20:43

score 6 · Answer 1 · answered Aug 27 '13 at 20:41

You can control the height of the cell in both CSS and JavaScript on hover.

In CSS, this would look like:

.cell{
    height: 40px;
    transition: height 1s ease-in;
    overflow: hidden;
}
.cell:hover{
    height: 100px;
}

Of course, I'm picking numbers arbitrarily here, so you'll need to fit those to your needs.

DrewP84 · Accepted Answer · 2013-08-27T20:54:55.917

2

You can accomplish this with javascript using onmouseover and onmouseout.

ie:

<td onmouseover="document.getElementById('textbox').innerHTML='Text to Show'" onmouseout="document.getElementById('textbox').innerHTML='Truncated Text'">
<div id=textbox>Truncated Text</div>
</td>

edited Aug 27 '13 at 20:54

answered Aug 27 '13 at 20:42

DrewP84

383
3
16

1

Thx! Marked this one as the solution as it works for all browsers, even IE8. (Y) – Treps Aug 27 '13 at 21:15
Glad to help. You can use substr to automatically truncate to a specific length that fits your cells. – DrewP84 Aug 27 '13 at 21:19

Lee Meador · Answer 3 · 2013-08-27T20:50:40.050

You can pick a dividing place, if that's possible in your situation:

<div>Some text that shows all the time
  <span class="more"> (more)</span>
  <span class="expanding"> and some more text that shows when you hover</span>
</div>

Then in the css, make the "more" class and the "expanding" class hide and show, respectively, as you hover over the div.

.more      { display: block; }
.expanding { display: none; }
div:hover > .expanding { display: block; }
div:hover > .more      { display: none; }

What this does is show and hide the child elements of the div. If you put the div in the td, it should fill it up and hover will look like its the td that you are hovering in. Or you could just use the td to hold all three.

The only tricky part of this is that it doesn't look good all the time unless you have a paragraph ending just above the "(more)". That's because you can't predict line endings in the middle of a paragraph as the rectangle holding the text changes width.

FIDDLE

Renan Basso · Answer 4 · 2013-08-29T00:31:56.057

1

You can use css text-overflow property to hide cell content with ellipsis

Like this:

table tr td
{
    text-overflow: ellipsis; 
    height: 40px;
}

table tr td:hover
{
    text-overflow: none; 
    height: auto;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

edited Aug 29 '13 at 00:31

answered Aug 27 '13 at 20:48

Renan Basso

795
2
7
19

Now in English, sorry! – Renan Basso Aug 29 '13 at 00:32

572 · Answer 5 · 2013-08-27T21:13:01.587

Here is an example,

I have a long text and I extract it when my mouseover it.

So, we start

<--Start-->

'>p
onLoad=function()
{
var text = this.innerHTML;
var hide = this.innerHTML.substr(0,7) + "...";
this.innerHTML = hide;
}
onMouseOver=function()
{
this.innerHTML = text;
}
onMouseOut=function()
{
this.innerHTML = hide;
}
< here is a long text >p<

<--End-->

Also, how can I add a program part like yours?

Hide/show content in table cell

5 Answers5