如何设置table，使单元格内容无论多少，只显示一行，超过单元格宽度的部分自动隐藏，当鼠标放到单元格上，内容自动显示完整？

主要包括3个步骤：

1. 设置style

<style>
.table{
table-layout: fixed;
}
.table td:hover{
overflow: visible;
white-space: normal;
}
.table td {
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

其中，

• table-layout设置为fixed，是为了设置column width其作用。
• overflow设置超出部分如何显示。
• white-space设置为nowrap使文本不换行。
• text-overflow设置为ellipsis，表示超出内容显示省略号。
• td：hover是鼠标放上去效果设置。

2.设置各个column的width

$table.bootstrapTable({
url: urlAddr,
 columns: [
 {
 field: 'name',
 title: '姓名',
 align: 'center',
 width: '3%'
},
{
field: 'age',
 title: '年龄',
 width: '6%'
},
            …
]
});

3.单元格内容中不要有‘<br>’等换行符