cirrus-ui/src/components/table.scss

A lightweight UI framework written in SCSS

@use '../src/internal' as *;

@if should-generate-classes($TABLE) {
    /* TABLE */

    .table-container {
        overflow: auto;
        overflow-y: hidden;
        max-width: 100%;
    }

    .table {
        margin-bottom: 1.5rem;
        width: 100%;
        border-collapse: collapse; /* Allows us to set 0 margin in table cells */
        border-spacing: 0;
        text-align: center; /* Text center by default */

        td,
        th {
            border: 1px solid transparentize(fill('gray', '300'), 0.5);
            border-width: 0 0 1px;
            padding: 0.75rem;
            vertical-align: top;
            text-align: inherit;
            margin: 0;
        }

        tr {
            transition: all 0.3s;

            &.selected {
                /* Style a selected row */
                background-color: fill('primary');
                color: #fff;
            }
        }

        .table caption {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            color: fill('gray', '300');
            text-align: left;
            caption-side: bottom;
        }

        tr:not(.selected):hover,
        &.striped tbody tr:not(.selected):nth-child(even):hover {
            background-color: transparentize(fill('gray', '300'), 0.15);
        }

        /* Thicker border for table header */
        thead th,
        thead {
            border-bottom: 2px solid transparentize(fill('gray', '300'), 0.5);
        }

        tfoot th {
            border-top: 2px solid transparentize(fill('gray', '300'), 0.5);
            border-bottom: none;
        }

        /* CUSTOM STYLES */
        /* All borders */
        &.bordered {
            thead th,
            thead {
                border-bottom: 1px solid transparentize(fill('gray', '300'), 0.5);
            }

            td,
            th {
                border: 1px solid transparentize(fill('gray', '300'), 0.5);
            }

            thead td,
            thead {
                border-width: 1px;
            }
        }

        /* Striped table */
        &.striped tbody tr:nth-child(even) {
            background-color: transparentize(fill('black'), 0.05);
        }

        /* Decrease padding */
        &.small td,
        &.small th {
            padding: 0.25rem 0.75rem;
        }

        /* Fixed title table */
        &.fixed-head thead {
            position: relative;
            display: block;
        }

        &.fixed-head tbody {
            min-height: 200px; /* Set the height you want */
            display: block; /* Needed */
            overflow: auto; /* Shows scrollbars */
        }

        &.fixed-head tr {
            display: table;
            width: 100%; /* Forces row to span container */
        }

        /* Borderless Table (for inner cells) */
        &.borderless thead th,
        &.borderless th,
        &.borderless td {
            border: none;
        }
    }
}