bootstrap如何实现table表格超过长度不显示
本文环境：windows10、bootstrap3.3.7，本文适用于所有品牌的电脑。
当表格里面的内容列数过多的，内容长度过长的时候，会出现自动换行的效果，整个表格的每一行高度就不相同了，看上去就不够美观。
参考demo如下：
<!DOCTYPE html>
<html>
<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"
}
]修改之后的效果就是这样的，如果超出宽度就会自动省略超过的部分，鼠标放在上面的时候，会将全部的内容显示出来。
标签：