bootstrap-table给所有的列表添加提示

需求1 在table中,如果表格信息过长,显示不美观.这时就需要让超出的部分省略号显示

需求2 鼠标移入,显示完整省略的信息

问题 - 1,bootstrap 表格宽度是有内容撑开的
- 2 , 表格信息是动态加载的,如何获得每一个单元格的内容
代码

// commom css中设置
.table{
   table-layout: fixed;
   word-break:break-all;
}
td{
   overflow: hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
} 

function tableOnload(){
    $('table').on('post-header.bs.table',function() {
        // console.log('加载完成')
        $("td").on("mouseenter",function() {
            if (this.offsetWidth < this.scrollWidth) {
                var that = this;
                var text = $(this).text();
                layer.tips(text, that,{
                    tips: [3, '#428bca'],
                    time: 2000,
                    maxWidth: '300px'
                });
            }
        });
})

麻烦的一点是,需要手动分配每一个表格占的宽,目前还没找到更合适的方法.有更省事的方法,欢迎交流

columns: [
                            {field: 'xxxName', title: 'x'x名称', align: 'center', valign: 'middle',width:20},
                            {field: 'xxxName', title: 'x'x名称', align: 'center', valign: 'middle',width:20},
                            {field: 'xxxName', title: 'x'x名称', align: 'center', valign: 'middle',width:20},
                            {field: 'xxxName', title: 'x'x名称', align: 'center', valign: 'middle',width:20},
                            {field: 'xxxName', title: 'x'x名称', align: 'center', valign: 'middle',width:20}
                 ]
                 // 按百分比分配表格的宽度