table 里的td内容过长,我想用。。。显示
table 里的td内容过长,我想用.....显示,重点:我想鼠标点.....上面,然后上面出现一个图层来显示整个内容,各位大哥大姐,求助啊!!!!!!!!!!!!
[解决办法]
我倒是有一个思路,用二级弹出菜单的方法
<!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>
<style type="text/css">这种能实现隐藏,并且后面有...显示,但是问题是怎么把鼠标移到上面去在鼠标右下方显示那些内容呢
#test{
display:block;/*内联对象需加*/
width:100px;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;
}
</style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">现在可以实现鼠标移上去在右下方显示了,例子为第一个和第二个单元格,希望对你和后面一样问题的人又帮助。
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gbk">
</HEAD>
<style type="text/css">
<!--
table { table-layout: fixed; }
td {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
-->
</style>
</head>
<body>
<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#CCCCCC" bordercolordark="#FFFFFF"
<tr>
<td width="100" height="20">
<a title = "我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行">
<NOBR>我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行
</NOBR>
</a>
</td>
<td width="100" height="20">
<a title = "我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行">
<NOBR>我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行
</NOBR>
</a>
</td>
<td width="100"> </td>
</tr>
<tr>
<td width="100" height="20"><NOBR>我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行</NOBR></td>
<td width="100"><NOBR>我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行我不换行</NOBR></td>
<td width="100"> </td>
</tr>
</table>
</body>
</html>
<a href="#" target="_blank" title="这里显示完整的内容">内容</a>