欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css特效实现html表格显示部分内容,当鼠标移上去显示全部。_html/css_WEB-ITnose

程序员文章站 2022-04-22 08:26:11
...
在写网页的时候,经常需要用表格来展示数据,但是如果其中某个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代码: