美文网首页
table表格超过隐藏,鼠标滑过显示全部

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

作者: 遛_遛 | 来源:发表于2019-03-27 12:36 被阅读0次

    控制表格定宽

    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表格超过隐藏,鼠标滑过显示全部

          本文链接:https://www.haomeiwen.com/subject/bxfzvqtx.html