请给我一个关于若依权限管理系统的用户管理css table样式实例
时间: 2024-03-19 18:43:25 浏览: 14
好的,以下是一个关于若依权限管理系统的用户管理css table样式实例:
```css
table {
border-collapse: collapse;
width: 100%;
}
thead {
background-color: #f2f2f2;
}
th,
td {
text-align: center;
padding: 8px;
}
th {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
td span {
padding: 3px 10px;
border-radius: 5px;
}
td .badge-success {
background-color: #28a745;
color: #fff;
}
td .badge-danger {
background-color: #dc3545;
color: #fff;
}
td .btn {
margin-right: 5px;
}
```
其中,`border-collapse` 属性用于合并单元格边框,`width` 属性设置表格宽度为100%,`text-align` 属性用于设置单元格的水平对齐方式,`padding` 属性用于设置单元格内边距,`background-color` 属性用于设置表头和表格行的背景颜色,`text-transform` 属性用于设置文字大小写,`letter-spacing` 属性用于设置文字间距,`nth-child` 伪类用于选择表格中的偶数行,`hover` 伪类用于设置鼠标悬停时的样式。同时,使用了 Bootstrap 框架提供的 `.badge` 和 `.btn` 样式类,使得表格中的状态和操作按钮看起来更加美观。