artistry/src/styl/table/table.styl

A powerful and configurable stylesheet

@require 'table-settings.styl';

table.table {
    width: 100%;
    border-collapse: collapse;

    tr {
        & > th {
            text-align: start;
        }

        & > th,
        & > td {
            padding: $table-spacing ($table-spacing / 2);

            &:first-child {
                padding-inline-start: $table-spacing;
            }

            &:last-child {
                padding-inline-end: $table-spacing;
            }
        }
    }

    & > thead {
        & > tr {
            border-bottom: 1px solid $table-head-border-color;
        }
    }

    & > tfoot {
        & > tr {
            border-top: 1px solid $table-head-border-color;
        }
    }

    &.table-striped {
        tbody {
            & > tr {
                &:nth-child(odd) {
                    background-color: $table-row-odd-background-color;
                }

                &:nth-child(even) {
                    background-color: $table-row-even-background-color;
                }
            }
        }
    }

    &.table-hoverable {
        tbody {
            & > tr {
                &:hover {
                    background-color: $table-row-hover-background-color;
                }
            }
        }
    }

    &.table-form {
        tbody {
            & > tr {
                &:not(:first-child) {
                    & > th,
                    & > td {
                        padding-top: ($table-spacing / 2);
                    }
                }

                &:not(:last-child) {
                    & > th,
                    & > td {
                        padding-bottom: ($table-spacing / 2);
                    }
                }
            }
        }
    }

    &.table-fixed {
        table-layout: fixed;
    }
}

.action-column {
    td& {
    }

    th& {
        width: 1px;
        white-space: nowrap;
    }
}