layui table在使用宽度百分号时的坑

layui table在使用宽度百分号时的坑

欢迎使用Markdown编辑器

在使用layui table时,我的表头是计算百分号的,每一个field: 'operation’都写了width: ‘5%’,所有表头加起来百分之百,但是会出现问题,问题如下,最右边出现了一个空格。在这里插入图片描述
在查找了很多很多资料之后,又绕到了合计等等之后,我突然把最后的操作删掉,发现多出的空格没了,剩下操作的位置,然后将操作的**width: ‘5%’**删掉,空格没了。

原代码

layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#signalControlList'
            ,cols: [[ //表头
                {type:'checkbox',width: '4%',fixed: 'left'}
                ,{field: 'id', title: '序号',width: '5%', align:'center', valign: 'middle'}
                ,{field: 'equipmentId', title: '设备ID',width: '16%', align:'center', valign: 'middle', sort: true }
                ,{field: 'equipmentName', title: '设备名称',width: '16%', align:'center', valign: 'middle'}
                ,{field: 'trafficWay', title: '当前通行方式',width: '16%', align:'center', valign: 'middle'}
                ,{field: 'controlModel', title: '当前控制模式',width: '16%', align:'center', valign: 'middle'}
                ,{field: 'equipmentIp', title: '设备IP', width: '16%', align:'center', valign: 'middle'}
                ,{field: 'operation', title: '操作', width: '11%', align:'center', valign: 'middle', templet: '#usernameTpl'}
            ]]
            ,data:[
                {
                    "id": "1"
                    ,"equipmentId": "RM83746380"
                    ,"equipmentName": ""
                    ,"trafficWay": ""
                    ,"controlModel": ""
                    ,"equipmentIp": ""
                },
                {
                    "id": ""
                    ,"equipmentId": ""
                    ,"equipmentName": ""
                    ,"trafficWay": ""
                    ,"controlModel": ""
                    ,"equipmentIp": ""
                },
                {
                    "id": ""
                    ,"equipmentId": ""
                    ,"equipmentName": ""
                    ,"trafficWay": ""
                    ,"controlModel": ""
                    ,"equipmentIp": ""
                }
            ]
        });
    });

原代码修改后

在这里插入图片描述

正确图片

在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值