第一种:
列表宽度设置前:
第一步:设置css的table-layout属性值为fixed,此时可以自己调整列宽了;再添加word-break:break-all,此时数据可以自动换行。
<style type="text/css">
.table {table-layout:fixed;word-break:break-all;}
</style>
或
<table id="cblx" class="table table-border" style="table-layout:fixed;word-break:break-all;"></table>
table-layout可能值 | 描述 |
---|---|
auto | 默认。列宽度由单元格内容设定。 |
fixed | 列宽由表格宽度和列宽度设定。 |
inherit | 规定应该从父元素继承 table-layout 属性的值。 |
第二步:在每一列设置width属性值
function tab_1_table_init() {
var jsTypeDate={};
jsTypeDate["CTRL-DIV-1044TABLE"]={
"url":"data.json",
"tableId":"cblx20",
"method":"post",
"pageSize":10,
"sort":false,
"page":true,
"Refresh":false,
"id":"CTRL-DIV-1044",
"table_columns":[
{"visible":true,field:"design_unit",title:"设计单位",width:100,align:"center",edit:false},
{"visible":true,field:"item_name",title:"项目名称",width:200,align:"center",edit:false},
{"visible":true,field:"design_stage",title:"勘察设计阶段",align:"center",edit:false,formatter:function (value, row, index, field) {
return '<a href="javascript:void(0)" class="delPro" id="">链接</a>';
}},
{"visible":true,"field":"inspection_stage","title":"实施验收阶段","edit":false,formatter:function (value, row, index, field) {
return '<a href="javascript:void(0)" class="delPro" id="">链接</a>';
}},
{"visible":true,"field":"final_score","title":"项目综合考评得分","edit":false}
],
"table_title_text":"",
"loadSuccess":"",
"btn":false};
$('#CTRL-DIV-1044').find(".btn-group").remove();
bootstrap_table(jsTypeDate["CTRL-DIV-1044TABLE"]);
}
设置后:
参考:[https://blog.csdn.net/wang1171405487/article/details/80667530]
第二种
<table id="cblx23" class="resizable-table table-border table-bordered table-hover" width="100%">
<tr>
<th style="vertical-align: middle !important;text-align: center;" width="30%"></th>
</tr>
</table>
参考:https://www.csdn.net/gather_2c/NtzaYgxsMjQxLWJsb2cO0O0O.html?platform=pc&page=2&pageSize=20