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

  • 相关阅读:
    springmvc 路由
    springMVC 流程
    SqlServer中Sql语句的逻辑执行顺序
    中小型公司静态资源管理部署方案
    浅谈SQL Server中的三种物理连接操作
    Zclip复制页面内容到剪贴板兼容各浏览器
    C#中如何利用操作符重载和转换操作符
    类型构造器(静态构造函数)的执行时机你知道多少?
    容器云技术选择之kubernetes和swarm对比
    kafka入门
  • 原文地址:https://www.cnblogs.com/xmm2017/p/13943870.html
Copyright © 2011-2022 走看看