html表格内容溢出隐藏,bootstrap-table表格超过长度自动隐藏 多余部分显示省略号...

当表格里面的内容列数过多的，内容长度过长的时候，会出现自动换行的效果，整个表格的每一行高度就不相同了，看上去就不够美观。

参考demo如下：

bootstrap-table表格超过长度自动省略

$('#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"

}

}

}

参考的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": "uzi",

"card": "340823199853467"

},{

"id": 139,

"deviceId": "3",

"name": "mlxg",

"card": "34082319983563456"

}, {

"id": 139,

"deviceId": "3",

"name": "小虎",

"card": "34082319983252"

}

]

修改之后的效果就是这样的，如果超出宽度就会自动省略超过的部分，鼠标放在上面的时候，会将全部的内容显示出来。

分享到：