2023年6月20日发(作者：)

bootstrapTable表格设置单元格宽度⽆效并且数据太长⽽不换⾏的解决办法根据上图的滚动条可以发现，消费详情这列的数据的长度特别长，所以导致了页⾯出现了滚动条，在实际的应⽤中，页⾯⽔平⽅向使⽤滚动条去观察数据是较为不⽅便的，所以我们需要将此列的数据换⾏显⽰。第⼀时间想到的是将表格的标题头设置宽度，我们可以设置固定宽度，也可以设置百分⽐宽度，我这⾥是设置的百分⽐宽度，上代码。columns : [ { checkbox : true}, { field : 'date', width : '10%', title : '⽇期'}, { field : 'spendDetail', title : '消费详情', width : '70%', align : "left", valign : "middle"}, { field : 'dpayr', width : '10%', title : '单⽇钻⽯总消耗'}, { field : 'tpayr', width : '10%', title : '累计钻⽯总消耗'} ]我给“消费详情”这⼀列设置了70%的宽度⽐，清除浏览器页⾯缓存刷新页⾯，发现还是⼀样的问题。宽度⽐根本没起作⽤！我尝试着⽤样式去改变，在静态页⾯加上 注：table-layout:fixed 的作⽤就是固定列的宽度的。再次清除缓存刷新页⾯。发现页⾯的宽度已经固定了，这就解决了设置宽度不起作⽤的问题，但是“消费详情”这列的数据还是有问题，我们只固定了标题头，但是数据还是没有换⾏显⽰！我们还需要⼀个属性：word-break:break-all;注：此属性的含义是如果单元格内的数据在被列宽限制的情况下会换⾏显⽰。现在我加上的是：注：以下两个样式分别解决了列设置宽度不起作⽤的问题与数据不换⾏的问题。table-layout:fixed; word-break:break-all;

2023年6月20日发(作者：)

bootstrapTable表格设置单元格宽度⽆效并且数据太长⽽不换⾏的解决办法根据上图的滚动条可以发现，消费详情这列的数据的长度特别长，所以导致了页⾯出现了滚动条，在实际的应⽤中，页⾯⽔平⽅向使⽤滚动条去观察数据是较为不⽅便的，所以我们需要将此列的数据换⾏显⽰。第⼀时间想到的是将表格的标题头设置宽度，我们可以设置固定宽度，也可以设置百分⽐宽度，我这⾥是设置的百分⽐宽度，上代码。columns : [ { checkbox : true}, { field : 'date', width : '10%', title : '⽇期'}, { field : 'spendDetail', title : '消费详情', width : '70%', align : "left", valign : "middle"}, { field : 'dpayr', width : '10%', title : '单⽇钻⽯总消耗'}, { field : 'tpayr', width : '10%', title : '累计钻⽯总消耗'} ]我给“消费详情”这⼀列设置了70%的宽度⽐，清除浏览器页⾯缓存刷新页⾯，发现还是⼀样的问题。宽度⽐根本没起作⽤！我尝试着⽤样式去改变，在静态页⾯加上 注：table-layout:fixed 的作⽤就是固定列的宽度的。再次清除缓存刷新页⾯。发现页⾯的宽度已经固定了，这就解决了设置宽度不起作⽤的问题，但是“消费详情”这列的数据还是有问题，我们只固定了标题头，但是数据还是没有换⾏显⽰！我们还需要⼀个属性：word-break:break-all;注：此属性的含义是如果单元格内的数据在被列宽限制的情况下会换⾏显⽰。现在我加上的是：注：以下两个样式分别解决了列设置宽度不起作⽤的问题与数据不换⾏的问题。table-layout:fixed; word-break:break-all;