76 lines
1.3 KiB
Svelte
76 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
let {
|
|
children,
|
|
striped = true
|
|
}: {
|
|
children: Snippet;
|
|
striped?: boolean;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class="table-container">
|
|
<table class="data-table" class:striped>
|
|
{@render children()}
|
|
</table>
|
|
</div>
|
|
|
|
<style>
|
|
.table-container {
|
|
border: 2px solid var(--text-color);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
text-align: left;
|
|
}
|
|
|
|
:global(.data-table th),
|
|
:global(.data-table td) {
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
:global(.data-table td) {
|
|
font-size: 0.95rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
:global(.data-table td:last-child) {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:global(.data-table td strong) {
|
|
font-weight: 500;
|
|
}
|
|
|
|
:global(.data-table th) {
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 0.95rem;
|
|
letter-spacing: 1px;
|
|
color: var(--text-muted);
|
|
background-color: transparent;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:global(.data-table tr:last-child td) {
|
|
border-bottom: none;
|
|
}
|
|
|
|
:global(.data-table tbody tr) {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
:global(.data-table.striped tbody tr:nth-child(even)) {
|
|
background-color: rgba(0, 0, 0, 0.025);
|
|
}
|
|
|
|
:global(.data-table tbody tr:hover) {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
</style>
|