今天说一说bootstrap-table表格优化相关的，当表格里面的内容列数过多的，内容长度过长的时候，会出现自动换行的效果，整个表格的每一行高度就不相同了，看上去就不够美观。
参考demo如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>bootstrap-table表格超过长度自动省略</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script> </head> <body> <table id="mytab" class="table table-hover" style="width: 400px;"></table> <script> $('#mytab').bootstrapTable({ method: 'get', url: "data.json", // 请求路径 striped: true, // 是否显示行间隔色 pageNumber: 1, // 初始化加载第一页 pagination: true, // 是否分页 sidePagination: 'client', // server:服务器端分页|client：前端分页 pageSize: 5, // 单页记录数 pageList: [5, 20, 30], queryParams: function(params) { // 上传服务器的参数 var temp = { name: $("#sname").val(), viewReason: $("#viewReason").val(), }; return temp; }, columns: [{ checkbox: true }, { title: 'id', field: 'id', visible: false }, { title: '设备编号', field: 'deviceId', }, { title: '姓名', field: 'name', }, { title: '证件号码', cellStyle: formatTableUnit, formatter: paramsMatter, field: 'card' }] }) //表格超出宽度鼠标悬停显示td内容 function paramsMatter(value, row, index) { var span = document.createElement("span"); span.setAttribute("title", value); span.innerHTML = value; return span.outerHTML; } //td宽度以及内容超过宽度隐藏 function formatTableUnit(value, row, index) { return { css: { "white-space": "nowrap", "text-overflow": "ellipsis", "overflow": "hidden", "max-width": "60px" } } } </script> </body> </html>
参考的json数据
[ { "id": 139, "deviceId": "3", "name": "王小婷", "card": "12354765787798745677" }, { "id": 139, "deviceId": "3", "name": "祈澈菇凉", "card": "3408231998918484" },{ "id": 139, "deviceId": "3", "name": "小飞侠", "card": "340823199823545" },{ "id": 139, "deviceId": "3", "name": "肖战", "card": "340823199853467" },{ "id": 139, "deviceId": "3", "name": "王一博", "card": "34082319983563456" }, { "id": 139, "deviceId": "3", "name": "肖战", "card": "34082319983252" } ]
修改之后的效果就是这样的，如果超出宽度就会自动省略超过的部分，鼠标放在上面的时候，会将全部的内容显示出来。
