如何设置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>’等换行符