Layui 修改表格样式

轻墨

2023 年 06 月 06 日

406 次浏览

1 条评论

2491字数

技术分享

## 1 基本背景

```csharp
body {
    background-color: #b200ff; /*黑色*/
}
```

## 2 表格字体

```csharp
.layui-table {
    color: #F8F8FB; /* 所有字体颜色 */
    background-color: transparent;
}
```

## 页导航 …颜色

```csharp
.layui-laypage .layui-laypage-spr {
    color: #0f0; 
}
```

## 4 第几页中间输入看字体颜色

```csharp
.layui-input {
    color: #f00;
}
```

```csharp
.layui-table thead tr, .layui-table-click,
.layui-table-header, .layui-table-mend,
.layui-table-patch, .layui-table-tool, .layui-table-total,
.layui-table-total tr,
.layui-table[lay-even] tr:nth-child(even) {
   /* background-color: #2DA80F; 绿色*/
    background-color: transparent;
}
```

```csharp
.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, 
.layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, 
.layui-table-tool, .layui-table[lay-even] tr:nth-child(even) {
    background-color: transparent;
}

```

## 5 头部和行的颜色

```csharp

.layui-table thead tr {
    /*background-color: #0094ff; 蓝色*/
    background-color: transparent;
}
```

## 6 行选中后,颜色

```csharp

/*.layui-table-hover {
    color: #0094ff; 
}*/
1234
```

## 7 到第、页 文字颜色

```csharp

.layui-laypage .layui-laypage-skip {
    color: #F8F8FB;
}
```

## 8 页工具栏 背景颜色

```csharp
 
.layui-laypage {
    background-color: #00f;
}
1234
```

## 9 共1条颜色

```csharp

.layui-laypage .layui-laypage-count {
    color: #F8F8FB;
}
```

## 10 条每页颜色

```csharp
input, optgroup, option, select {
    color: #F8F8FB;
    /*background-color: #14243C;*/
    background-color: transparent; 
}
```

## 11 确定按钮 颜色

```csharp
 
.layui-laypage-skip button {
    color: #F8F8FB;
    /*background-color: #14243C;*/
    background-color: transparent;
}
```

## 12 第几页的 input 输入框样式

```csharp
.layui-laypage-skip input {
    color: #F8F8FB;
    background-color: #14243C;
    background-color: transparent;
    /*background-color: transparent;*/
}

```

## 13 左右箭头的颜色

```csharp
.layui-icon {
    color: #F8F8FB;
}
```

## 14 页码的字体颜色

```csharp
/*页码的字体颜色*/
.layui-laypage a {
    color: #F8F8FB;
}
```

## 15 当前选中页的按钮颜色

```csharp

.layui-laypage .layui-laypage-curr .layui-laypage-em {
    color: #F8F8FB; /*白色*/
    background-color: #0094ff; /*蓝色*/
    background-color: transparent;
}

```

## 16 无数据时

```csharp
/* 无数据 时字体颜色 */
.layui-table-body .layui-none {
    color: #F8F8FB;
}
```

最后修改：2023 年 06 月 06 日

本文链接：http://www.qmsldg.com/index.php/archives/240/

除非注明，均默认采用CC BY-NC-SA 4.0许可协议