bootstrap设置表格列宽及换行

业务背景

在日常工作过程中，遇到一个字段长度太长的时候，列表展示整个展示的话效果太差，比如这样的

列表展示出现了滚动条，查看列表内容时就不太方便；但是业务的要求是不要用字段内容加title的形式，类似这样

而是需要全部展示，但是不能是滚动条样式的，太麻烦，那么只能是换行展示了。

页面操作

bootstrap支持设置列表宽度，于是设置列表宽度为300px

{

  field : 'payOrderNo',

  title : '支付订单号',

  width: '300px'

},

再次测试页面发现页面没有效果，但是宽度已经设置成功了

问题处理

查阅bootstrap相关属性css设置发现需要在table添加如下属性

style="table-layout:fixed;word-break:break-all;word-wrap:break-word;"

其中：table-layout:fixed; 表示开启表格固定列宽度；
word-break:break-all;word-wrap:break-word; 表示设置表格列自动换行；
整体添加了表格固定列宽属性后的代码

部署项目后查看页面效果

到此，bootstrap设置列表宽度并且换行展示的操作就算完成了。