CSS Invert (Transpose) Rows and Columns of HTML Table

See demo first. Click the red Transpose text several times to see the table transposed back and forth:

Transpose

(1,1)	(1,2)	(1,3)	(1,4)
(2,1)	(2,2)	(2,3)	(2,4)
(3,1)	(3,2)	(3,3)	(3,4)

To invert (transpose) the rows and columns of an HTML table, we can use the following CSS rules [2]:

tr { display: block; float: left; }
th, td { display: block; }

To toggle (original/transposed) the HTML table, we can use the technique described in [3] and [4].

The complete source code for above demo:

HTML

<label for="element-toggle">Transpose</label>
<input id="element-toggle" type="checkbox" />

<table id="toggled-element">
 <tbody>
  <tr>
    <td>(1,1)</td>
    <td>(1,2)</td>
    <td>(1,3)</td>
    <td>(1,4)</td>
  </tr>
  <tr>
    <td>(2,1)</td>
    <td>(2,2)</td>
    <td>(2,3)</td>
    <td>(2,4)</td>
  </tr>
  <tr>
    <td>(3,1)</td>
    <td>(3,2)</td>
    <td>(3,3)</td>
    <td>(3,4)</td>
  </tr>
 </tbody>
</table>

CSS

label[for=element-toggle] {
  cursor: pointer;
  color: red;
}
#element-toggle {
  display: none;
}

#element-toggle:checked ~ #toggled-element tr {
  display: block;
  float: left;
}
#element-toggle:checked ~ #toggled-element th,
#element-toggle:checked ~ #toggled-element td {
  display: block;
}

References:

[1]	css transpose table - Google search css transpose table - DuckDuckGo search css transpose table - Ecosia search css transpose table - Qwant search css transpose table - Bing search css transpose table - Yahoo search css transpose table - Baidu search css transpose table - Yandex search

[2]	javascript - HTML Table with vertical rows - Stack Overflow

[3]	Pure CSS Toggle Centered Element Width

[4]	Pure CSS Toggle (Show/Hide) HTML Element