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