layui table表头单独颜色
时间: 2023-09-05 14:03:22 浏览: 254
layui的表格table选中数据后更改本行的颜色
4星 · 用户满意度95%
在Layui table中,可以使用CSS来设置表头的颜色。首先,给表头单元格的class属性设置一个自定义的类名,例如"header-color"。然后,在CSS样式表中添加以下代码:
```
<style>
.header-color {
background-color: #ff0000; /*设置为红色背景*/
color: #ffffff; /*设置为白色字体*/
}
</style>
```
这里的背景颜色可以根据需求自行设置,例如"#ff0000"代表红色背景。颜色属性可以通过"#ffffff"来设置为白色字体。
接下来,在table中,将表头单元格的class设置为我们定义的"header-color"类名,例如:
```html
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
</colgroup>
<thead>
<tr>
<th class="header-color">姓名</th>
<th class="header-color">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
</tr>
</tbody>
</table>
```
这样就可以将表头的背景色设置为红色,字体颜色设置为白色。使用相同的方法,可以根据需求设置不同的颜色和样式。
阅读全文