Home >Web Front-end >HTML Tutorial >The td content in the table is too long, I want to use it. . . show_html/css_WEB-ITnose
The td content in the table is too long, I want to use it. . . show_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:19:551055browse
The td content in the table is too long. I want to use... to display it. Key point: I want to click the mouse on... and then a layer will appear on it to display the entire content. Dear brothers and sisters, please help. ah! ! ! ! ! ! ! ! ! ! ! !
Reply to the discussion (solution)
It’s useless to talk about the truth, it’s better to give an example and write a comment, thank you! ! ! ! ! ! ! ! ! ! !
I have an idea, use the method of two-level pop-up menu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">table { border: #CCC 1px solid;}td,th { width: 120px; border: 1px solid #999;}td:hover ul { display: block; }ul { display: none; border: 1px solid #999; list-style: none; margin: 0; padding: 0; position: absolute; width: 120px; background: #CCC;}</style></head><body><table> <tr> <th>标题一</th> <th>标题二</th> </tr> <tr> <td>内容一内容…… <ul> <li>隐藏内容一</li> </ul> </td> <td>内容二内……</td> </tr> <tr> <td>内容三</td> <td>内容四</td> </tr></table></body></html> I have an idea, use the method of two-level pop-up menu
XML/HTML code? 484950515253
8891beb4e3cee2c1bd7e7247055aa4916?value.subString(0,6):value), and then you move the mouse Go up and display a layer, and then display what you need on the layer. You can save the things you need in the layer with a hidden layer label. When you want to display it, directly display the image in a mouse move event. Layer is enough. If it is needed for each td, then you will use a span tag in each td to store the actual value of each td. The actual value of each td will be hidden. When the mouse moves in, you can get it directly after the event is fired. Corresponding to the value of the hidden span tag in td, assign it to the layer to be displayed, and then display the layer to complete the function you want. You can try it. This should solve the situation you mentioned. If so, follow up. The method can be posted.
A few question mark expressions are missing...((value.length>6?(value.subString(0,6) "..."):value))
Question marks There are a few missing expressions...((value.length>6?(value.subString(0,6) "..."):value))
This is called a ternary expression, okay?
Is this called a ternary expression?
It’s just a different name. Deng Xiaoping said that a black cat or a white cat is a good cat if it can catch mice. What do you think?
table is forced not to wrap:
table{table-layout:fixed;} td{overflow: hidden; text-overflow: ellipsis;word-break: keep-all;white-space: nowrap;}
In this way, although the ellipses are displayed, the omitted content in td actually exists. You can use some jQuery tip plug-ins to display it, or you can write your own js
Handsome guy, Why didn’t I see that I was given points? I guess that’s fine