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);
})

你可能感兴趣的:(table表格超过隐藏,鼠标滑过显示全部)