在写网页的时候,经常需要用表格来展示数据,但是如果其中某个td中的数据太多,就会使整个页面不协调,如果固定了表格的宽度那么内容又不能全部显示出来,怎么办呢? 本人今天就遇到了这样一个小问题,现将其记录下来,留作以后需要时查看。
先上css代码:
.newsInfo:hover {
background: #eee;
color: #333;
z-index: 999;
}
.newsInfo {
position: relative;
z-index: 0;
}
.newsInfo span {
display: none;
}
.newsInfo:hover span {
display: block;
position: absolute;
min-width:400px;
top: 28px;
left:100px;
border: 1px solid #cccccc;
background: #C1CDC1;
color: black;
padding: 5px;
text-align: left;
overflow: hidden;
}
.newInfoTruncation {
width:120px;
white-space:nowrap;
word-break:keep-all;
overflow:hidden;
text-overflow:ellipsis;
}
然后html代码:
<html>
<head>
<link href="index.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div>
<a href="#"class="newsInfo">
<div class="newInfoTruncation">
参考消息网2月29日报道 韩媒称,中国正在迅速增强国防实力。去年年底和今年年初,中国先后采取了各种史无前例的强化军事力量的措施。有预测称,连续5年实现两位数增长的中国国防预算今年的涨幅将超出以往。
</div>
<span>
参考消息网2月29日报道 韩媒称,中国正在迅速增强国防实力。去年年底和今年年初,中国先后采取了各种史无前例的强化军事力量的措施。有预测称,连续5年实现两位数增长的中国国防预算今年的涨幅将超出以往。
</span>
</a>
</div>
</body>
</html>本文出自 “欺壹世De博客” 博客,请务必保留此出处http://qiyishi.blog.51cto.com/5731577/1746416
css特效实现html表格显示部分内容,当鼠标移上去显示全部。
原文:http://qiyishi.blog.51cto.com/5731577/1746416