您现在的位置：首页 >> 前端 >> 内容

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

时间：2017/1/22 9:26:59 点击：

　　核心提示：主要包括3个步骤：设置stylestyle.table{table-layout: fixed;} .table td:hover{ overflow: visible; white-space: n...

主要包括3个步骤：

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