Layui修改表格样式

使用Layui做表格显示数据时候&＃xff0c;不要自定义表格&＃xff0c;但是layui的css已经写好了&＃xff0c;这个时候要改layui的css就比较麻烦&＃xff0c;本文我总结了layui表格风格更改样式

比如下面&＃xff0c;body是紫色&＃xff0c; 我把表格样式全部位透明

**本片博客达到的效果是&＃xff0c;全透明效果&＃xff0c;所有字体是白色的&＃xff0c;无选中效果**

2 使用css文件中的样式

文件中的样式名称不可更改&＃xff0c;因为文件中的样式名称跟layui里的css名称一样&＃xff0c;目的是覆盖layui库的样式&＃xff0c;这样就达到了自定义样式目的

1 基本背景

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


2 表格字体

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


3 页导航 …颜色

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


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

.layui-input {color: #f00;
}


.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;
}


.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 头部和行的颜色


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


6 行选中后,颜色


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


7 到第、页 文字颜色


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


8 页工具栏 背景颜色


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


9 共1条颜色


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


10 条每页颜色

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


11 确定按钮 颜色


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


12 第几页的 input 输入框样式

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


13 左右箭头的颜色

.layui-icon {color: #F8F8FB;
}


14 页码的字体颜色

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


15 当前选中页的按钮颜色


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


16 无数据时

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