Responsive Tables Source

NOTICE:

This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.

[!-- {$responsive-table-start}
[[module css]]
.responsive_table .table_data,
.responsive_table .table_header_data {
    vertical-align: top;
    text-align: left;
    margin: -0.0625rem 0 0 -0.0625rem;
}

@media screen and (min-width: 801px) {
    /* wide screens */

    .responsive_table {
        background-color: white;
        border-collapse: collapse;
        border-spacing: 0;
        margin: .5em auto;
        display: table;
        background-color: transparent;
        -webkit-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: background-color 80ms cubic-bezier(0.4, 0.0, 0.2, 1), color 80ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    .responsive_table * {
        margin: 0;
        padding: 0;
    }

    .responsive_table .table_data {
        padding: 0.625em;
        border: .0625rem solid rgba(66, 66, 72, 0.25) !important;
        border: .0625rem solid rgba(var(--swatch-menubg-medium-dark-color), 0.25) !important;
        background-color: rgb(var(--pale-gray-monochrome));
        color: rgb(var(--dark-gray-monochrome));
    }

    .responsive_table .table_header {
        display: table-header-group
    }

    .responsive_table .table_row {
        display: table-row
    }

    .responsive_table .table_header_data {
        display: table-cell;
        padding: 0.625em;
        border: .0625rem solid rgba(66, 66, 72, 0.25) !important;
        border: .0625rem solid rgba(var(--swatch-menubg-medium-dark-color), 0.25) !important;
        background: #aaa;
        background: rgb(var(--swatch-menubg-medium-color));
        color: #fcfcfc;
        color: rgb(var(--swatch-menutxt-light-color));
        font-weight: 700;
    }

    .responsive_table .table_data {
        text-align: left;
        display: table-cell
    }

}

@media screen and (max-width: 800px) {

    /* hide headings */
    .responsive_table .table_header {
        display: none;
    }

    .responsive_table .table_row {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
        background-color: white;
        padding: 0.375em;
        border: 0.0625rem #CCCCCC solid;
        border: 0.0625rem rgb(var(--swatch-border-color)) solid;
        margin-bottom: 1.250em;
    }

    .responsive_table .table_data {
        padding: 1.95em 0.5em 0.5em 0.5em;
        border: 0.0625rem #CCCCCC solid;
        border: 0.0625rem rgb(var(--swatch-border-color)) solid;
        position: relative;
    }

    .responsive_table .table_row div:not(:nth-of-type(even)):last-of-type {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / span 2;
    }

    /* Add labels */
    .responsive_table .table_data::before {
        content: attr(data-label) "\A";
        /* label + newline */
        white-space: pre;
        /* makes newline work */
        font-size: 0.750em;
        color: #888888;
        color: rgb(var(--medium-accent));
        text-transform: uppercase;
        width: -webkit-calc(100% - 0.7em);
        width: -moz-calc(100% - 0.7em);
        width: calc(100% - 0.7em);
        height: 1.35em;
        position: absolute;
        margin-bottom: 1em;
        top: 0;
        left: 0;
        background: #aaa;
        background: rgb(var(--swatch-menubg-medium-color));
        color: #fcfcfc;
        color: rgb(var(--swatch-menutxt-light-color));
        padding-left: 0.7em;
        padding-top: 0.35em;
        padding-bottom: 0.7em;
        font-weight: 700;
    }

}
[[/module]]

[[div_ class="responsive_table"]]
[!----]

[!-- {$header-start}
    [[div_ class="table_header"]]
        [[div_ class="table_row"]]
[!----]

[!-- {$header-cell-start}
            [[div_ class="table_header_data"]]
[!----]        

[!-- {$header-cell-end}        
            [[/div]]
[!----]

[!-- {$header-end}
        [[/div]]
    [[/div]]
[!----]

[!-- {$row-start}
    [[div_ class="table_row"]]
[!----]

[!-- {$cell-start}
        [[div_ class="table_data" data-label="{$cell-header}"]]
[!----]

[!-- {$cell-end}
        [[/div]]
[!----]

[!-- {$row-end}
    [[/div]]
[!----]

[!-- {$responsive-table-end}
[[/div]]
[!----]