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 the background-color attribute of the .layui-table class.

Steps:

1. Use layui’s table component in HTML:

   <code class="html"><table class="layui-table">
     <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>邮箱</th>
    </tr>
     </thead>
     <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>zhangsan@example.com</td>
    </tr>
    <!-- ... 其他行 -->
     </tbody>
   </table></code>

2. Set the table background color in CSS:

   <code class="css">.layui-table {
     background-color: #f5f5f5;  // 设置背景为浅灰色
   }</code>

Example:

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

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!