bootstrap设置表格列宽及换行

bootstrap设置表格列宽及换行

• 业务背景
• 页面操作
• 问题处理

业务背景

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

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

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

页面操作

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

登录后复制

{

  field : 'payOrderNo',

  title : '支付订单号',

  width: '300px'

},

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.

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

问题处理

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

登录后复制

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

• 1.

其中：table-layout:fixed; 表示开启表格固定列宽度；

word-break:break-all;word-wrap:break-word; 表示设置表格列自动换行；

整体添加了表格固定列宽属性后的代码

部署项目后查看页面效果

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

原创作者: u_10917175 转载于: https://blog.51cto.com/u_10917175/11553533