Connected.Components/Styles/components/_simpletable.scss


.simple-table {

    table {
        width: 100%;
        display: table;
        border-spacing: 0;
        border-collapse: collapse;

        thead {
            display: table-header-group;
        }

        tbody {
            display: table-row-group;
        }

        * tr {
            color: inherit;
            display: table-row;
            outline: 0;
            vertical-align: middle;

            > td, th {
                display: table-cell;
                padding: 16px;
                font-size: 0.875rem;
                text-align: start;
                font-weight: 400;
                line-height: 1.43;
                border-bottom: 1px solid var(--palette-table-lines);
                letter-spacing: 0.01071em;
                vertical-align: inherit;
            }

            > th {
                font-weight: 500;
                line-height: 1.5rem;
            }
        }

        tbody {
            tr:last-child {
                td {
                    border-bottom: none;
                }
            }
        }
    }
}

.simple-table.table-dense {
    & * tr {
        & td, th {
            padding: 6px 16px;
        }
    }
}

.simple-table.table-hover {
    & .table-container table tbody {
        & tr:hover {
            background-color: var(--palette-table-hover);
        }
    }
}

.simple-table.table-bordered {
    & .table-container table tbody {
        & tr {
            td {
                border-right: 1px solid var(--palette-table-lines);
            }

            td:last-child {
                border-right: none;
            }
        }
    }
}

.simple-table.table-striped {
    & .table-container table tbody {
        & tr:nth-of-type(odd) {
            background-color: var(--palette-table-striped);
        }
    }
}

.table-hover.table-striped {
    & .table-container table tbody {
        & tr:nth-of-type(odd):nth-of-type(odd):hover {
            background-color: var(--palette-table-hover);
        }
    }
}

.simple-table.table-sticky-header {
    .table-container {
        overflow-x: auto;
        max-height: 100%;
    }

    & * table {
        border-collapse: separate;

        thead {
            & * th:first-child {
                border-radius: var(--default-borderradius) 0 0 0;
            }

            & * th:last-child {
                border-radius: 0 var(--default-borderradius) 0 0;
            }

            & * th {
                background-color: var(--palette-surface);
                position: sticky;
                z-index: 1;
                top: 0;
            }
        }
    }
}


.simple-table.table-sticky-footer {
    .table-container {
        overflow-x: auto;
        max-height: 100%;
    }

    & * table {
        border-collapse: separate;

        tfoot {
            & * td {
                background-color: var(--palette-surface);
                position: sticky;
                z-index: 1;
                bottom: 0;
            }
        }
    }
}