當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;
        }

展示效果如下圖：