bootstrap table td 固定宽度 内容过长 超出隐藏显示省略号，鼠标放上去显示

前端菜鸟折腾了一天，被测试打回好几次。。。。。。。。。。。

关键词：

table-layout:fixed;设置高度;固定高度；悬停；"white-space": 'nowrap',"text-overflow": 'ellipsis',"overflow": 'hidden'

网上有很多关于bootstrap table 设置td宽度,内容超出部分异常,悬停显示全部的方案。

但是几乎都有共同的冲突和问题

1、必须设置table table-layout:fixed;

 

但是和设置表格高度冲突，会导致表格不对齐

2、设置td的宽度无效

3。、、、、、、、

 

 

解决方案：

第一种、去掉表格高度设置、

第二种、亲测一种方案可实现需求，也可设置高度

1、不需要table-layout:fixed

2、设置td宽度和css

貌似td宽度可不设置

貌似真正起作用的就是"white-space": 'nowrap'

 

 

 

function formatTableUnit(value, row, index) {

return {

css: {

"white-space": 'nowrap',

"text-overflow": 'ellipsis',

"overflow": 'hidden'

}

}

}

3、让td返回包裹一层span(也可多个)，设置宽度等于td宽度（title 实现悬停）

貌似td宽度可不设置。设置span宽度即可

"<span style='width: 120px; display:inline-block;text-decoration:underline;margin-top:2px;color: blue' title='"+val.showname+"' href='javascript:void(0)' οnclick=\"downloadFile('"+val.filename+"','"+val.showname+"')\">"+val.showname+"</span>"