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====================================================================================================================*/
推荐阅读
-
layui table设置某一行的字体颜色方法
-
layui table设置某一行的字体颜色方法
-
layui table 参数设置方法
-
layui table动态表头 改变表格头部 重新加载表格
-
由于ie浏览器ajax缓存 导致layui table表格重载失败的解决办法
-
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
-
解决layui数据表格table的横向滚动条显示问题
-
layui-table-column-select(layui数据表格可搜索下拉框select)
-
layui数据表格自定义每页条数limit设置
-
layui的table表格在同一单元格换行显示2个数据(layui-table)