layui: elememt.tab和table组合使用时出现的样式问题及解决方案

假设我们用了layui的tab页，并且两个tab页里面都有表格，就会遇到这个问题。

第一个表格（一开始就会显示）是正常的，但是另外一个表格（一开始没显示）就会出现一个样式问题：

表格多渲染了一个像素，导致底下出现了滚动条。

这个问题有两个方法可以解决。

1 在渲染好之后手动设置第二个表格的样式。

        table.render({
            elem: '#new_table_b'
            , height: "auto"
            , cellMinWidth: 10
            , even: true
            , page: false //开启分页
            , cols: cols
            , data: data
            , done:function(res){
                $('div[lay-id="new_table_b"]').css({'margin-right': '-1px'});
            }
        });

众所周知，margin可以设为负数。

 

2 直接设置样式，去掉滚动条。

.layui-table-body.layui-table-main{
  overflow:hidden
}

以上。