自定义 Iview 库 Table 组件样式
2022年5月12日小于 1 分钟
自定义 Iview 库 Table 组件样式
Iview UI 没有提供修改 Table 组件样式的方法,那就只能自己动手了
/* 表格 */
/deep/.ivu-table {
background: rgba(0, 0, 0, 0);
&::after,
&::before,
th,
td {
background: rgba(0, 0, 0, 0);
}
th {
color: #00ffff;
font-weight: bold;
border: none;
}
td {
color: #ffffff;
border: none;
}
}
/* 表头 */
/deep/.ivu-table-header {
border: 2px solid rgba(0, 248, 255, 0.4);
}
/* 偶数行 */
/deep/.ivu-table-stripe-even td {
background-color: rgba(0, 0, 0, 0);
}
/* 奇数行 */
/deep/.ivu-table-stripe-odd td {
background-color: rgba(2, 139, 143, 0.23);
}
/* 滚动条 */
/deep/.ivu-table-wrapper {
border: 0;
scrollbar-color: #c8d2e0 #f3f4f9;
scrollbar-width: thin;
}
/* 整个滚动条 */
/deep/.ivu-table-overflowY::-webkit-scrollbar {
width: 2px;
height: 4px;
}
/* 滚动条上的滚动滑块 */
/deep/.ivu-table-overflowY::-webkit-scrollbar-thumb {
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: white;
}
/* 滚动条轨道 */
/deep/.ivu-table-overflowY::-webkit-scrollbar-track {
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.1);
}