aSkelly/scss/component/_table.scss

@use '../utilities/main_utilities' as *;

/* Tables */
.table-container{
    overflow-x: auto;
}
table {
    border: 1px solid $color-text-secondary;
    border-radius: $border-radius;
    border-spacing: 0;
    max-width: 100%;
    white-space: nowrap;

    text-align: left;
    border-collapse: collapse;
    overflow-wrap: normal;

    @include color-scheme(dark) {
        border-color: $color-text-secondary--dark;
    }
}

table td,
table th,
table tr {
    padding: 0.4rem 0.8rem;
    text-align: $justify-important;
}

table thead tr {
    background-color: $color-secondary;
    /* border-radius: $border-radius; */
    color: $color-background;
    margin: 0;
    padding: 0;

    @include color-scheme(dark) {
        background-color: $color-secondary--dark;
        color: $color-background--dark;
    }
}

table thead tr {
    border-top-left-radius: $border-radius;
}

tbody tr:nth-child(even) {
    background-color: $color-accent;

    @include color-scheme(dark) {
        background-color: $color-text-secondary--dark;
    }
}
tbody tr:nth-child(odd) {
    background-color: $color-background;
    
    @include color-scheme(dark) {
        background-color: $color-background--dark;
    }
}