在layui表格中会设置每列的宽度，但是常常会遇到单元格显示内容太长而无法完全显示的情况。layui表格默认的方法是点击单元格最右侧的箭头，会弹出一个显示行显示全部内容，点击关闭按钮即关闭了这个弹出的显示行。

但是我在项目中遇到的问题是要求鼠标移动到显示内容上显示全部内容，而不是点击箭头弹出框显示全部内容，下面就是我实现的方法：

主要包括几个内容：

1.将单元格显示内容的dom节点用layui表格的模板换成input

2.设置input的type为text，value就是要显示的内容，

3.设置input的title的属性的值与value相同，即鼠标移动到内容上方显示全部的内容

4.设置input的宽度width：100%，这个宽度根据自己实际需要中修改，我需要的是适应input父元素的宽度

5.设置input的value显示内容过长时剩余内容显示为省略号...（样式需要，看起来美观些）

以下为代码：

layui.use('table', function(){
    var table = layui.table;
    table.render({
        elem: '#documentTable'
        ,id:'documentTab'
        ,data:dataList
        ,even: true 
        ,cols: [[
            ,{title:'序号', width:'4%',templet:function (res) {
                    return res.LAY_INDEX;
                }}

            ,{field:'BO_DOCUMENT_NAME', title:'类型', width:'17%',templet:function (res) {
                    return "<input type='text' value='" + res.BO_DOCUMENT_NAME + "' title='" + res.BO_DOCUMENT_NAME + "' " +
                        "style='width: 100%;border: none;background: transparent;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;'>";
                }}

            ,{field:'documentCategory', title:'单位', width:'10%',align:'center'}
        ]]
        ,done:function () {
            $('.layui-table tr td:nth-child(5)').css({'text-align':'left'});
        }
        ,page: true
        , limits: [10, 20, 30]
        , limit: 10,
    });

}