解决layui切换tab后,返回lay-this时表格样式变形表格内容挤在一起,宽度改变,缩在一起,

layui切换tab后返回laythis表格样式变形宽度改变缩在一起

在这里插入图片描述
在这里插入图片描述
最好设置百分比,适应比较好

/* 表格样式缩在一起设置固定宽 */
        thead th:nth-child(1),tbody td:nth-child(1){
   
            width: 10px !important;
        }
        thead th:nth-child(1)>div,tbody td:nth-child(1)>div{
   
            width: 100% !important;
        }
        thead th:nth-child(2),tbody td:nth-child(2){
   
            width: 20% !important;
        }
        thead th:nth-child(2)>div,tbody td:nth-child(2)>div{
   
            width: 100% !important;
        }
        thead th:nth-child(3),tbody td:nth-child(3){
   
            width: 30% !important;
        }
        thead th:nth-child(3)>div,tbody td:nth-child(3)>div{
   
            width: 100% !important;
        }
        thead th:nth-child(4),tbody td:nth-child(4){
   
            width: 10% !important;
        }
        thead th:nth-child(4)>div,tbody td:nth-child(4)>div{
   
            width: 100% !important;
        }
        thead th:nth-child(5),tbody td:nth-child(5){
   
            width
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以将重复的代码抽取出来作为一个公共的HTML模板,然后在需要使用的地方引用即可,可以使代码更加简洁。 例如,你可以将创意包的tab页抽出作为公共的模板: ```html <!-- 创意包模板 --> <script type="text/html" id="tpl-creative"> <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="{{d.id}}"> <ul class="layui-tab-title" style="width: 85%"> {{# layui.each(d.items, function(index, item){ }} <li {{ index === 0 ? 'class="layui-this"' : '' }} lay-id="{{ item.id }}">{{ item.title }}</li> {{# }); }} </ul> <div class="layui-tab-content"> {{# layui.each(d.items, function(index, item){ }} <div class="layui-tab-item {{ index === 0 ? 'layui-show' : '' }}">{{ item.content }}</div> {{# }); }} </div> </div> </script> <!-- 页面内容 --> <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content"> <div class="layui-btn addContent" lay-active="addContent">添加创意包</div> <ul class="layui-tab-title" style="width: 85%"> <li class="layui-this" lay-id="1">创意包1</li> <li lay-id="2">创意包2</li> </ul> <div class="layui-tab-content"> <!-- 引用创意包模板 --> {{# layui.laytpl($('#tpl-creative').html()).render({ id: 'creative1', items: [{ id: '1', title: '标题1', content: '内容-1' }, { id: '2', title: '标题2', content: '内容-2' }] }) }} </div> </div> ``` 在上面的代码中,我们将创意包的tab页抽取出来作为了一个公共的模板,可以通过laytpl模块来渲染模板并将结果插入到页面中。这样就可以避免重复的代码,使代码更加简洁。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值