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