css特效实现html表格显示部分内容，当鼠标移上去显示全部。

最新推荐文章于 2024-04-09 11:12:09 发布

转载

最新推荐文章于 2024-04-09 11:12:09 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/qiyishi/1746416

在网页设计中，遇到表格数据过多导致页面不协调的问题，可以使用CSS实现一种技巧：默认显示部分内容，鼠标悬停时显示全部。通过这种方式，既能保持页面整洁，又能在需要时展示完整信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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