table {
    border-collapse: collapse;
    // letter-spacing: 0.02em;
    max-width: 100%;
    overflow-x: auto;
    display: block;

    &.code {
        font-family: monospace;

        td,
        th {
            text-align: center;
        }
    }
    & ~ table {
        margin-top: 1rem;
    }
}

thead {
    font-weight: bold;
    border-bottom: 2px solid currentColor;
}

td,
th {
    border: 1px solid #111;
    padding: 2px;
    min-width: 32px;
    vertical-align: top;

    & > code {
        word-break: normal;
    }
}

table:not(.code) td,
table:not(.code) th {
    padding: 2px 6px;
}

.pad-row {
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    height: 1px;
}

@media (prefers-color-scheme: dark) {
    td,
    th {
        border: 1px solid #777;
    }
}