前端菜鸟折腾了一天,被测试打回好几次。。。。。。。。。。。
关键词:
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)' onclick=\"downloadFile('"+val.filename+"','"+val.showname+"')\">"+val.showname+"</span>"
本文探讨了在使用Bootstrap Table时遇到的布局与高度设置冲突问题,提供了一种不依赖table-layout:fixed属性的解决方案,同时保持了表格的高度设置,并通过调整CSS实现了内容超出时的优雅显示。

1万+

被折叠的 条评论
为什么被折叠?



