Table表格的单元格提示

最新推荐文章于 2024-06-27 14:09:40 发布

量变决定质变

最新推荐文章于 2024-06-27 14:09:40 发布

阅读量849

点赞数

分类专栏： ————Layui

本文链接：https://blog.youkuaiyun.com/nangeali/article/details/80836597

版权

————Layui 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种处理表格单元格内容过长的方法，通过CSS样式实现内容的省略显示，并利用JavaScript结合layui插件实现在鼠标悬停时展示完整内容。此方案适用于网页表格数据展示，特别当单元格内容长度不一时能保持良好的视觉效果。

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

表格的单元格显示

单元格内容，如果太多显示为省略号
鼠标放在上面，显示里面的全部内容
这里写图片描述
CSS关键代码

table{
　　table-layout: fixed;
}

td{
　　white-space: nowrap;
　　overflow: hidden;
　　text-overflow: ellipsis;
}

JS关键代码

// 单元格悬停
$("td").on("mouseenter", function () {
    if (this.offsetWidth < this.scrollWidth) {
        var that = this;
        var text = $(this).text();
        layer.tips(text, that, {
            tips: [3, '#E8E8E8'],
            time: 2000
        });
    }
});