Table with radius corners and stripes #usefulSCSS

_table.scss

.table {
    width: auto;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;

    th {
        
        &:first-child {
            border-radius: $radius 0 0 0;
        }

        &:last-child {
            border-radius: 0 $radius 0 0;
        }
    }

    th, 
    td {
        padding: 10px;
        text-align: left;
        border-left: 1px solid $grey;

        &:last-child {
            border-right: 1px solid $grey;
        }
    }

    td {
        color: $grey--mid-dark;
        background: $white;

        @include font-size(14px, true, false, $tight-line-height-ratio);
    }

    tbody {

        tr {
            &:nth-child(even) {
                td {
                    background: $eggshell;
                }
            }

            &:last-of-type {
                td {
                    border-bottom: 1px solid $grey;

                    &:last-child {
                        border-radius: 0 0 $radius 0;
                    }

                    &:first-child {
                        border-radius: 0 0 0 $radius;
                    }
                }
            }
        }

    }

    tr + tr {
        td {
            border-top: 1px solid $grey;
        }
    }

    // Base element Modifiers 
    
    &--fill {
        width: 100%;
    }

    &--fixed { 
        // For adding inline-widths to columns more predictably
        table-layout: fixed;
    }

    &--no-stripes {
        tr {
            &:nth-child(even) {
                td {
                    background: $white;
                }
            }
        }
    }

}