How to change the table background color in layui

To change the background color of the table in layui, you need to set the background-color property of the .layui-table class in CSS. The specific steps are as follows: Use the layui table component in HTML. Set the table background color in CSS, such as: .layui-table { background-color: #f5f5f5; }.

How to change the table background color in layui?

You can change the background color of the table in layui by setting thebackground-colorattribute of the.layui-tableclass.

Steps:

1. Use layui’s table component in HTML:

    
    
    
   ID
    
   姓名
    
   邮箱
    
    
    
    
    
   1
    
   张三
    
   zhangsan@example.com
    
     
    

   Copy after login

2. Set the table background color in CSS:

   .layui-table { background-color: #f5f5f5; // 设置背景为浅灰色 }

   Copy after login

Example:

.layui-table { background-color: #f5f5f5; } .layui-table-header { background-color: #e6e6e6; // 设置表头背景为淡灰色 } .layui-table-cell { background-color: #fff; // 设置单元格背景为白色 }

Through the above CSS code , the background color of the table will become light gray, the header background will become light gray, and the cell background will be white.

The above is the detailed content of How to change the table background color in layui. For more information, please follow other related articles on the PHP Chinese website!