Maison  >  Article  >  interface Web  >  Comment changer la couleur d'arrière-plan du tableau dans layui

Comment changer la couleur d'arrière-plan du tableau dans layui

下次还敢
下次还敢original
2024-04-26 03:21:141071parcourir

Pour changer la couleur d'arrière-plan du tableau dans layui, vous devez définir la propriété background-color de la classe .layui-table en CSS. Les étapes spécifiques sont les suivantes : Utilisez le composant layui table en HTML. Définissez la couleur d'arrière-plan du tableau en CSS, par exemple : .layui-table { background-color: #f5f5f5 }.

Comment changer la couleur d'arrière-plan du tableau dans layui

Comment changer la couleur de fond du tableau dans layui ?

Vous pouvez modifier la couleur d'arrière-plan du tableau dans layui en définissant l'attribut .layui-table 类的 background-color.

Étapes :

  1. Utilisez le composant table de layui en 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. Définissez la couleur d'arrière-plan du tableau en CSS

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

Exemple :

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

par le CSS ci-dessus code, la couleur d'arrière-plan du tableau deviendra gris clair, l'arrière-plan de l'en-tête deviendra gris clair et l'arrière-plan de la cellule sera blanc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn