layui table 表格设置透明

通过css来控制,直接上代码

首先需要将table标签放入div中,div增加class名称 transparentDataTable ,
如果是静态表格,则增加transparentStaticTable ,然后引入此css文件即可.

/**
   设置表透明  start====================================================================================================================
 */

.transparentDataTable .layui-table{
    background-color: transparent !important;
}
.transparentDataTable .layui-table-view{
    background-color: rgba(0, 0, 0, 0.5) !important;
}
.transparentDataTable .layui-table-tool {
    background-color: transparent !important;
}

.transparentDataTable .layui-table-tool .layui-icon {
    color: white;
}

.transparentDataTable .layui-table-header, .transparentDataTable .layui-table-cell, .layui-table-header thead tr {
    background-color: transparent !important;
}

.transparentDataTable .layui-table-header thead th, .transparentDataTable .layui-none {
    /*border: 1px solid #FFFFFF;*/
    color: white !important;
}

.transparentDataTable .layui-table tbody tr {
    border: 1px solid #FFFFFF;
    color: white;
}

.transparentDataTable .layui-table-init, .transparentDataTable .layui-laypage-limits select, .transparentDataTable .layui-laypage-btn, .transparentDataTable .layui-laypage-skip input {
    background-color: transparent !important;
    color: white;
}

.transparentDataTable .layui-table-page a, .transparentDataTable .layui-table-page span {
    color: white !important;
}


.transparentDataTable .layui-laypage-limits select, .transparentDataTable .layui-laypage-limits option {
    -webkit-appearance: none; /* google */
    -moz-appearance: none; /* firefox */
    appearance: none; /* IE */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /* 点击去除高亮的颜色*/
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: white;
}

.transparentDataTable .layui-table[lay-even] tr:nth-child(even){
    background-color: rgba(180, 238, 180, 0.5) !important;
}


/*静态表格透明*/
.transparentStaticTable .layui-table{
    background-color: rgba(0, 0, 0, 0.5) !important;
}
.transparentStaticTable .layui-table tbody tr:hover, .statistics_branch_one .layui-table tbody tr:hover {
    background-color: transparent !important;
}

/*.statistics_table_opacity {*/
/*    background-color: rgba(0, 0, 0, 0.5) !important;*/
/*}*/

/*设置表透明  end====================================================================================================================*/