zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Unity The Method Signature Matching Rule
    Unity The Property Matching Rule
    Unity The Type Matching Rule
    Unity The Custom Attribute Matching Rule
    Unity The Member Name Matching Rule
    Unity No Policies
    Unity The Return Type Matching Rule
    Unity The Parameter Type Matching Rule
    Unity The Namespace Matching Rule
    关于TSQL递归查询的(转)
  • 原文地址:https://www.cnblogs.com/xmm2017/p/13943870.html
Copyright © 2011-2022 走看看