js table内容过长时，显示部分内容，鼠标悬浮显示全部

当table内容过长时，显示部分内容，鼠标悬浮显示全部

当前问题

如果输入框没有做字符长度限制，会导致table的某一列显示内容过长，这样会导致table布局发生改变，而且显示不美观。如图：

解决方案

直接上代码吧：
CSS代码如下：

<style>
        td{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            max-width: 240px;
        }
</style>

table代码如下：

$(function() {

            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: "无人机",
                showRefresh: false,                   // 是否显示刷新按钮
                showColumns: false,                   // 是否显示隐藏某列下拉框
                showToggle: false,                     // 是否显示详细视图和列表视图的切换按钮
                showExport: false,
                columns: [
                {
                    field: 'id',
                    title: 'id',
                    visible: false
                },
                {
                    field: 'droneCode',
                    title: '无人机编号',
                    formatter: paramsMatter
                },
                {
                    field: 'droneName',
                    title: '无人机名称',
                    formatter: paramsMatter
                },
                {
                    field: 'droneModel',
                    title: '无人机型号',
                    formatter: paramsMatter
                },
                {
                    field: 'operateUser',
                    title: '操作人员'
                },
              /*  {
                    field: 'patrolRange',
                    title: '巡检范围'
                },*/
                    {
                        field: 'deptName',
                        title: '部门名称',
                        visible: dept_vis
                    },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        if(100 == deptId){
                            actions.push('<a class="btn btn-primary btn-xs " href="javascript:void(0)" onclick="configDept(\'' + row.id + '\')"><i class="fa fa-sitemap"></i>设置部门</a> ');
                        }
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-cogs"></i>巡检设置</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });

鼠标悬停显示全部功能 JS代码如下：

//表格超出宽度鼠标悬停显示td内容
        function paramsMatter(value,row,index) {
            var span=document.createElement("span");
            span.setAttribute("title",value);
            span.innerHTML = value;
            return span.outerHTML;
        }

展示效果如下图：