• 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

  • 相关阅读:
    顺序表的扩容
    顺序表的插入
    顺序表的构造
    C# ContentType: "application/json" 请求方式传json
    顺序表构造,插入,扩容操作
    顺序表
    线性表
    算法
    数据结构的分类
    什么是数据结构
  • 原文地址:https://www.cnblogs.com/xmm2017/p/13943870.html
Copyright © 2020-2023  润新知