87 lines
1.5 KiB
CSS
87 lines
1.5 KiB
CSS
/**
|
|
* 表格组件样式
|
|
*/
|
|
|
|
@layer components {
|
|
/* 基础表格 */
|
|
.table-container {
|
|
@apply w-full overflow-x-auto;
|
|
}
|
|
|
|
.table {
|
|
@apply min-w-full divide-y divide-gray-200;
|
|
}
|
|
|
|
.table thead {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
.table th {
|
|
@apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
|
|
}
|
|
|
|
.table tbody {
|
|
@apply bg-white divide-y divide-gray-200;
|
|
}
|
|
|
|
.table td {
|
|
@apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
|
|
}
|
|
|
|
.table tr:hover {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
/* 紧凑表格 */
|
|
.table-compact th {
|
|
@apply px-4 py-2 text-xs;
|
|
}
|
|
|
|
.table-compact td {
|
|
@apply px-4 py-2 text-xs;
|
|
}
|
|
|
|
/* 边框表格 */
|
|
.table-bordered {
|
|
@apply border border-gray-200;
|
|
}
|
|
|
|
.table-bordered th,
|
|
.table-bordered td {
|
|
@apply border border-gray-200;
|
|
}
|
|
|
|
/* 条纹表格 */
|
|
.table-striped tbody tr:nth-child(odd) {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
/* 可选择行表格 */
|
|
.table-selectable tbody tr {
|
|
@apply cursor-pointer;
|
|
}
|
|
|
|
.table-selectable tbody tr.selected {
|
|
@apply bg-[rgba(0,104,74,0.05)];
|
|
}
|
|
|
|
/* 表格分页 */
|
|
.table-pagination {
|
|
@apply flex items-center justify-between py-3 px-4 bg-white border-t border-gray-200;
|
|
}
|
|
|
|
.table-pagination-info {
|
|
@apply text-sm text-gray-500;
|
|
}
|
|
|
|
.table-pagination-actions {
|
|
@apply flex items-center space-x-2;
|
|
}
|
|
|
|
/* 响应式处理 */
|
|
@screen md {
|
|
.table-responsive {
|
|
@apply overflow-x-visible;
|
|
}
|
|
}
|
|
} |