bootstrap设置表格列宽及换行

简介: 简述bootstrap设置表格列宽及换行

业务背景

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

image.png

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

image.png

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

页面操作

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

{
  field : 'payOrderNo',
  title : '支付订单号',
  width: '300px'
},

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

image.png

问题处理

查阅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; 表示设置表格列自动换行;

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

image.png

部署项目后查看页面效果

image.png

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

相关文章
|
8月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
62 1
|
8月前
|
前端开发
表格插件-bootstrap table的隔行换色
表格插件-bootstrap table的隔行换色
95 0
|
8月前
|
前端开发 JavaScript
表格插件-bootstrap table的表内查看编辑删除
表格插件-bootstrap table的表内查看编辑删除
82 0
|
9月前
|
前端开发
|
2月前
|
前端开发 容器
bootstrap table 设置自定义列宽
【5月更文挑战第4天】bootstrap table 设置自定义列宽
|
2月前
|
前端开发
BootStrap 5 保姆级教程(三):表格 & 图片
BootStrap 5 保姆级教程(三):表格 & 图片
|
8月前
|
前端开发
bootstrap table表格去掉排序箭头
bootstrap table表格去掉排序箭头
119 2
|
8月前
|
前端开发
bootstrap table表格外面的边框全部去掉
bootstrap table表格外面的边框全部去掉
125 1
|
8月前
|
JSON 前端开发 数据库
Bootstrap Table使用教程(请求json数据渲染表格)
Bootstrap Table使用教程(请求json数据渲染表格)
109 0
|
8月前
|
前端开发
bootstrap table+layer实现一个表格删除
bootstrap table+layer实现一个表格删除
37 0