日本語環境での表・テーブル等へのスタイル table (ja-JP) by MaruniUmebachi

/* ==UserStyle==
@name         1. 書式 Table
@version      20241116.07.41
@namespace    https://userstyles.world/user/MaruniUmebachi
@description  Table style for article page.
@homepage     https://userstyles.world/style/18558/var-ja-jp
@author       MaruniUmebachi
@license      CC 0
==/UserStyle== */

@-moz-document regexp("http"), regexp(".*") {
:not(:has(form table, formtable#mvDaynamesTable.mv-daynames-table)) {
    :is(table, th, td) {
        --Stylus-CSS: "Table Stylus";
        --border-block-Stylus-table: 1px solid;
    }

    table {
        --Stylus-CSS: "Table Stylus";
        --width-Stylus-table: 100%;
        --max-width-Stylus-table: calc(16px * 50);
        --height-Stylus-table: 240px;
        --margin-Stylus-table: 0 auto;
        --display-Stylus-table: block;
        --overflow-x-Stylus-table: auto;
        --border-spacing-Stylus-table: 0;
        tbody {
            --Stylus-CSS: "Table Stylus";
            --border-block-Stylus-table: 1px solid;
            --white-space-Stylus-table: nowrap;
            :is(th, td) {
                --Stylus-CSS: "Table Stylus";
                --padding-Stylus-table: 5px 10px;
                --border-top-width-Stylus-table: 0;
                --border-left-width-Stylus-table: 0;
                &:last-child {
                    --Stylus-CSS: "Table Stylus";
                    --border-right-width-Stylus-table: 0;
                }
            }

            th {
                --Stylus-CSS: "Table Stylus";
                --position-Stylus-table: sticky;
                --top-Stylus-table: 0;
                --background-Stylus-table: white;
                --color-Stylus-table: black;
                --vertical-align-Stylus-table: bottom;
            }

            tr {
                --Stylus-CSS: "Table Stylus";
                --max-inline-size-Stylus-table: 100%;
                th + td:last-child,
                td:only-child {
                    --Stylus-CSS: "Table Stylus";
                    --word-break-Stylus-table: keep-all;
                    --text-wrap-Stylus-table: balance;
                    --font-size-Stylus-table: calc(16px * 1.25);
                    font-family: serif;
                    &:not(:nth-child(2)) {
                        --Stylus-CSS: "Table Stylus";
                        --max-inline-size-Stylus-table: 20em;
                    }

                    &:nth-child(2) {
                        --Stylus-CSS: "Table Stylus";
                        --inline-size-Stylus-table: 100%;
                    }
                }
            }

            tr:last-child td {
                --Stylus-CSS: "Table Stylus";
                --border-bottom-width-Stylus-table: 0;
            }
        }
    }
}
}

@-moz-document regexp(".*"), regexp("") {
:not(form) {
    :where(table, th, td) {
        --Stylus-CSS: "Table Stylus";
        border-block: var(--border-block-Stylus-table);
    }

    table {
        --Stylus-CSS: "Table Stylus";
        width: var(--width-Stylus-table);
        max-width: var(--max-width-Stylus-table);
        height: var(--height-Stylus-table);
        margin: var(--margin-Stylus-table);
        display: var(--display-Stylus-table);
        overflow-x: var(--overflow-x-Stylus-table);
        border-spacing: var(--border-spacing-Stylus-table);
    }

    tbody {
        --Stylus-CSS: "Table Stylus";
        border-block: var(--border-block-Stylus-table);
        white-space: var(--white-space-Stylus-table);
    }

    :where(th, td) {
        --Stylus-CSS: "Table Stylus";
        padding: var(--padding-Stylus-table);
        border-top-width: var(--border-top-width-Stylus-table);
        border-left-width: var(--border-left-width-Stylus-table);
    }

    th {
        --Stylus-CSS: "Table Stylus";
        position: var(--position-Stylus-table);
        top: var(--top-Stylus-table);
        background: var(--background-Stylus-table);
        color: var(--color-Stylus-table);
        vertical-align: var(--vertical-align-Stylus-table);
    }

    tr {
        --Stylus-CSS: "Table Stylus";
        max-inline-size: var(--max-inline-size-Stylus-table);
        th + td:last-child,
        td:only-child {
            --Stylus-CSS: "Table Stylus";
            max-inline-size: var(--max-inline-size-Stylus-table);
            inline-size: var(--inline-size-Stylus-table);
            word-break: var(--word-break-Stylus-table);
            text-wrap: var(--text-wrap-Stylus-table);
            font-size: var(--font-size-Stylus-table);
        }
    }

    :where(th, td):last-child {
        --Stylus-CSS: "Table Stylus";
        border-right-width: var(--border-right-width-Stylus-table);
    }

    tr:last-child td {
        --Stylus-CSS: "Table Stylus";
        border-bottom-width: var(--border-bottom-width-Stylus-table);
    }
}
}