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设置列表宽度并且换行展示的操作就算完成了。
原文地址：https://blog.csdn.net/csdn565973850/article/details/140520493
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！