@shower/material/styles/slide/content/table.css

Material theme for Shower HTML presentation engine

/* Table */

.slide table {
    margin-left: calc(
        var(--slide-left-side) * -1
    );
    margin-bottom: 1em;
    width: calc(
        100% +
        var(--slide-left-side) +
        var(--slide-right-side)
    );
    border-collapse: collapse;
    border-spacing: 0;
}

/* Cells */

.slide th,
.slide td {
    padding-top: 0;
    padding-bottom: 0;
}

.slide th {
    text-align: left;
    font-weight: bold;
}

.slide th:first-child,
.slide td:first-child {
    padding-left: var(--slide-left-side);
}

.slide th:last-child,
.slide td:last-child {
    padding-right: var(--slide-left-side);
}

/* Lines */

.slide tr:not(:last-of-type) > * {
    background-image:
        linear-gradient(
            to top,
            var(--color-light) 0.06em,
            transparent 0.06em
        );
    background-repeat: repeat-x;
}

/* Stripes */

.slide table.striped tr:nth-child(even) {
    background-color: var(--color-back);
}

.slide table.striped tr > * {
    background-image: none;
}

/* Marked Row */

.slide tr.mark {
    background-color: var(--color-yellow);
}

/* Next Marked Row */

.slide tr.mark.next {
    visibility: visible;
    background-color: transparent;
}

.slide tr.mark.next.active,
.slide tr.mark.next.visited {
    background-color: var(--color-yellow);
}