.transposedtable {

}

.transposedtable tr {
    display: block;
    float: left;
}

.transposedtable th, td {
    display: block;
}


/* IE-10/11 Grid */
.vertical table {
    display: -ms-grid;
    -ms-grid-rows: auto auto;
    -ms-grid-columns: auto auto;
}

.vertical table thead {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

.vertical table tbody {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

.vertical table caption {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
}

/* Everyone Else's Grid */
@supports (display: grid) {
    .vertical table {
        display: grid;
        grid-template-columns: min-content min-content;
        grid-template-rows: auto auto;
        grid-template-areas:
       "caption caption"
       "head body";
    }

    .vertical table thead {
        grid-area: head;
    }

    .vertical table tbody {
        grid-area: body;
    }

    .vertical table caption {
        grid-area: caption;
    }
}

/* Flex - Cross Browser CSS */
.vertical table thead {
    display: flex;
    flex-shrink: 0;
    min-width: min-content;
}

.vertical table tbody {
    display: flex;
}

.vertical table thead tr, .vertical table tbody tr {
    display: flex;
    flex-direction: column;
    min-width: min-content;
    flex-shrink: 0;
}

.vertical table tbody td, .vertical table thead th {
    display: block;
}

.vertical table caption {
    display: block;
}