美文网首页
layui-table 多一列

layui-table 多一列

作者: 咩咩籽 | 来源:发表于2019-11-30 10:44 被阅读0次

    使用layui-table时发现会出现如下情况,多一列


    2019-11-30_103915.png

    原因是 给每一列设置了宽度,加起来还达不到容器的宽度,就自动填充了。
    解决办法 给某一列不设置宽度,让其自适应

    //可以这样
    <table class="layui-table" lay-data="{height:315, url:'/data/type', page:true, id:'test'}" lay-filter="test">
            <thead>
            <tr>
                <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                <th lay-data="{field:'type_name', width:200}">分类名称</th>
                <th lay-data="{field:'type_comment', sort: true}">分类描述</th>
            </tr>
            </thead>
        </table>
    //也可以这样
            table.render({
                id: "testReload"
                , elem: '#demo'
                , url: '/data/user'
                , where: {
                    id: 0
                },
                cols: [
                    [ //标题栏
                        {field: 'id', title: 'ID', width: 80, sort: true},
                        {field: 'name', title: '用户名', width: 120},
                        {field: 'phone', title: '电话号码', minWidth: 150, edit: 'text'},
                        {field: 'address', title: '地址', minWidth: 160, edit: 'text'},
                        {fixed: 'right', width: 165, align: 'center', align: 'center', title: '操作', toolbar: '#barDemo'}
                    ]
                ]
                , skin: 'line' //表格风格
            });
    //还可以这样
    <table id="orderTab" class="layui-table" lay-filter="orderTab" hidden="hidden">
                                <colgroup>
                                    <col width="100">
                                    <col width="150">
                                    <col width="150">
                                    <col width="150">
                                    <col width="150">
                                    <col width="150">
                                    <col>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>商品名称</th>
                                    <th>商品数量</th>
                                    <th>商品单价</th>
                                    <th>小计</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="orderTabBody" >
    
                                </tbody>
                            </table>
    

    相关文章

      网友评论

          本文标题:layui-table 多一列

          本文链接:https://www.haomeiwen.com/subject/mbxowctx.html