欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

layui table 表格设置透明

程序员文章站 2022-03-26 19:25:22
...

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====================================================================================================================*/