在写网页的时候,经常需要用表格来展示数据,但是如果其中某个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