|
|
|
|
|
.table-container { |
|
|
overflow-x: auto; |
|
|
-webkit-overflow-scrolling: touch; |
|
|
} |
|
|
|
|
|
.table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
background: white; |
|
|
border-radius: var(--radius-lg); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.table th, |
|
|
.table td { |
|
|
padding: var(--spacing-4); |
|
|
text-align: left; |
|
|
border-bottom: 1px solid var(--color-secondary-200); |
|
|
} |
|
|
|
|
|
.table th { |
|
|
background: var(--color-accent-50); |
|
|
font-weight: var(--font-weight-semibold); |
|
|
color: var(--color-secondary-700); |
|
|
} |
|
|
|
|
|
.table tr:hover { |
|
|
background: var(--color-accent-50); |
|
|
} |
|
|
|
|
|
.table-responsive { |
|
|
display: block; |
|
|
width: 100%; |
|
|
overflow-x: auto; |
|
|
white-space: nowrap; |
|
|
-webkit-overflow-scrolling: touch; |
|
|
} |
|
|
|
|
|
@media (max-width: 767px) { |
|
|
.table-container { |
|
|
margin: 0 -var(--spacing-4); |
|
|
padding: 0 var(--spacing-4); |
|
|
} |
|
|
|
|
|
.table th, |
|
|
.table td { |
|
|
padding: var(--spacing-3) var(--spacing-2); |
|
|
font-size: var(--font-size-sm); |
|
|
} |
|
|
} |
