table {
    border: 1px solid var(--foreground);
    border-collapse: collapse;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    table-layout: fixed;

    thead {
        position: sticky;
        top: 0;
        background: var(--foreground);
        color: var(--background);
        text-align: start;
    }

    tbody {
        tr {
            background-color: var(--background);
            border-bottom: 1px solid var(--foreground);
            transition: background-color 125ms;

            &:nth-child(even) {
                background-color: var(--dt-background);
            }

            &:hover {
                background-color: var(--table-highlight);
            }
        }
    }

    th,
    td {
        padding: 6px 12px;
        text-align: start;
    }

    td {
        ul {
            padding: 0;
            margin: 0;

            li {
                display: inline;

                &:not(last-child)::after {
                    content: ", ";
                }

                &:last-child::after {
                    content: "";
                }
            }
        }

        p {
            margin: 0;
        }
    }

    caption {
        caption-side: bottom;
    }
}