美文网首页
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 多一列

    使用layui-table时发现会出现如下情况,多一列 原因是 给每一列设置了宽度,加起来还达不到容器的宽度,就自...

  • 一列等分多列

    最近被一朋友给难住了有没有快速等分成三列,没多想直接用最简单的方法你和他说 通过添加辅助列进行复制粘就可以,今天去...

  • python数据分析10:数据转换

    数据转换:一般包括一列数据转换为多列数据,行列转换,DataFrame转换为字典、列表和元组等 【一列数据转换为多...

  • “无穷”的世界里有令人惊奇的性质!

    从1开始,一列整数 1,2,3,4,5,… 和 从2开始,一列偶数 2,4,6,8,10,… 哪一列数字多? 为什...

  • Layui-Table增删改查

    前言 1.使用layui与后端进行交互2.列表展示数据3.使用layer弹出层进行添加和修改4.批量删除数据 这篇...

  • layui-table的相关问题

    layui--table格式: 这里介绍一个非demo的写法: 1.在html中直接写table,而不是在js中渲...

  • CSS3开发常用核心技能

    基础网页布局 布局分类 一列布局 两列布局 三列布局 多列布局 一列布局: 二列布局: 三列布局: ⚠️ midd...

  • mysql-修改数据表

    如果不加 first | after 则被添加到最后一列 指定添加在某一列后面 多列只能添加在最后 删除单列 删除...

  • 用R语言调整表格列的顺序

    R语言里的数据框,约等于表格。比表格多一个要求就是一列只允许一种数据类型的存在。 需求 将数据框最后一列放到第一列...

  • Spark SQL一列拆分多列

    将DataFrame中的一列拆分为多列,示例如下: import sparkObject.spark.implic...

网友评论

      本文标题:layui-table 多一列

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