表格td内容过多时,td显示省略号,鼠标移入显示全部内容

表格td内容过多时,td显示省略号,鼠标移入显示全部内容

css文件:

html,body{  
    padding: 0px;margin: 0px;   
}   
table{  
    margin: 0px;  
    padding: 0px;  
    width: 30%;  
    border-collapse: collapse;  
    table-layout: fixed;  /*不添加此样式,会全部显示    */
}   
table td{  
    border: 1px solid #eef2e9;  
    /* text-overflow: ellipsis; */ /* 加上,显示省略号*/
	white-space: nowrap;
	overflow: hidden;
}
table td:hover { /* 鼠标滑过  显示隐藏的内容  伴有横向的滚动条 */
	overflow:auto; 
	text-overflow:clip; 
} 

js文件:

//js给所有td加上悬浮显示(title)
//给所有的td加title
        function titleAllTd() {
            $("#ChaKanGrid tr td").each(function () {
                $(this).attr("title", $(this).text());
                $(this).css("cursor", 'pointer');
            });
        }




bootstrap table 应用时:

 $(selectors.table).bootstrapTable({
            url: #,         //请求后台的URL(*)
            data: res,
            method: 'get',                     
            toolbar: '#toolbar',               
            striped: false,                     
            pagination: true,                   //是否显示分页(*)
            sidePagination: "client",          
            pageSize: 6,                       //每页的记录行数(*)
            pageList: [2, 4, 6, 8, 10],        //可供选择的每页的行数
            queryParams: postFun,//传递参数(*)
            responseHandler: responseHandler,
            formatLoadingMessage: function () {  // 表格生成过程中执行的方法
                return '请稍等,正在加载中...'; // 返回一串等待文字
            },
            columns: "",
            onLoadSuccess:titleAllTd      //s给所有td加上悬浮显示(title)
        })

猜你喜欢

转载自blog.csdn.net/weixin_42575028/article/details/86441712