table表格超过隐藏,鼠标滑过显示全部

控制表格定宽

table{
     table-layout: fixed;
}

td控制超出变省略号

.ellipsis{
    width:100%; 
    display:block; 
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

滑过显示全部 使用了layer插件

var tip_index = 0;
$("table").on("mouseover", "td", function() {
    if(this.offsetWidth < this.scrollWidth) { //判断文本是否超出
        var content = $(this).text(); //获取文案
        if(content) {
            tip_index = layer.tips(content, this, { time: 0 , tips: [3, '#ffb951'], area: ['200px', 'auto']});
        }
    }  
})

$("table").on("mouseleave",  "td", function() {
    layer.close(tip_index);
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。