Hide / show contents in table cell

Question

I have an HTML table and there is a lot of text in one of the cells. Is there an easy way to hide the content, and when I find this exact cell all the content appears? For example, just show the first 10-20 characters or something else. And then when I visit this cell, all the content will appear.

Can I do this in a simple way using CSS or do I need JavaScript, etc.

Answer 1

You can accomplish this with javascript using onmouseover and onmouseout.

t

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

Answer 2

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

In CSS, it will look like this:

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

Of course, I collect numbers arbitrarily here, so you will need to meet these requirements.

Answer 3

You can choose a separation place, if 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 css, create the “more” class and hide the “expanding” class and show accordingly when you hover over a div.

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

What this means is to show and hide the children of the div. If you put the div in td, it should fill it in, and the hover will look the same as the td you are on. Or you can just use td to store 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 "(more)". This is because you cannot predict line endings in the middle of a paragraph, because the rectangle containing the text changes width.

Fiddle

Answer 4

You can use css text-overflow property to hide cell contents 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

Answer 5

Here is an example

I have a long text and I retrieve it when I hover over it.

So, we are starting

<- 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 the long text> p <

<- End →

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