bootstrap table设置列宽

第一种:

列表宽度设置前:
在这里插入图片描述
第一步:设置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

原文地址:https://www.cnblogs.com/xmm2017/p/13943870.html