Transpose Table with Caption (CSS-Only)

index.html

<div id="site">
<header id="header">Heading</header>
<main id="content">
  <p id="one">First Paragraph</p>
  <p id="two">Second Paragraph</p>
  <p id="third">Third Paragraph</p>
  <p id="fourth">
  <table>
    <caption>Original Table</caption>
    <thead>
    <tr><th>Num</th><th>Alpha</th></tr>
    </thead>
    <tr><td>1.1.1.1.1</td><td>Apple</td></tr>
    <tr><td>2.2.2</td><td>Banana</td></tr>
    <tr><td>3.3.3.3.3.3.3</td><td>Cherry</td></tr>
    <tr><td>4.4</td><td>Dates</td></tr>
  </table>
  </p>
  <p id="fifth">
  <table class="vertical">
    <caption>Flipped Table (Grid+Flex)</caption>
    <thead>
    <tr><th>Num</th><th>Alpha</th></tr>
    </thead>
    <tr><td>1.1.1.1.1</td><td>Apple</td></tr>
    <tr><td>2.2.2</td><td>Banana</td></tr>
    <tr><td>3.3.3.3.3.3.3</td><td>Cherry</td></tr>
    <tr><td>4.4</td><td>Dates</td></tr>
  </table>
  </p>
</main>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

.vertical {
  display: -ms-grid;
  -ms-grid-rows: auto auto;
  -ms-grid-columns: auto auto;
  display: grid;
  grid-template-columns: min-content min-content;
  grid-template-rows: auto auto;
  grid-template-areas:
    "caption caption"
    "head body";
}
.vertical thead {
  grid-area: head;
  display: flex;
  flex-shrink: 0;
  min-width: min-content;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}
.vertical tbody {
    grid-area: body;
    display: flex;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}
.vertical tr {
  display: flex;
  flex-direction: column;
  min-width: min-content;
  flex-shrink: 0;
}
.vertical td, .vertical th {
  display: block;
}
.vertical caption {
  display: block;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: caption; 
}

/* Visual styling */
table { border-collapse: collapse; }
table td {
  border: 1px solid black; 
}
table th {
  border: 1px solid black;
  background-color: grey;
  color: white;
}

transpose-table-with-caption-css-only.markdown

Transpose Table with Caption (CSS-Only)

Using only CSS (Grid and Flex), transpose a table that has a caption. Flex puts the caption in the wrong place, so we need grid layout, also.

A Pen by kitzelh on CodePen.

License.