layui table 表格设置透明

最新推荐文章于 2025-09-11 02:23:34 发布

转载最新推荐文章于 2025-09-11 02:23:34 发布 · 1.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/linzi19900517/article/details/99544191

本文介绍了一种使用CSS实现表格透明效果的方法。通过修改背景颜色、边框样式及文字颜色，使表格在保持功能的同时拥有更佳的视觉体验。适用于需要透明效果的网页设计。

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