Maison > Article > interface Web > css特效实现html表格显示部分内容，当鼠标移上去显示全部。_html/css_WEB-ITnose
css特效实现html表格显示部分内容，当鼠标移上去显示全部。_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 08:55:532529parcourir
在写网页的时候，经常需要用表格来展示数据，但是如果其中某个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> Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Bootstrap入门笔记之（六）其它：警示框、进度条、列表组、面板等_html/css_WEB-ITnoseArticle suivant：Gulp 自动化你的前端_html/css_WEB-ITnose