純CSS將HTML的Table的行列互換

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

<label for="element-toggle">行列互換</label>
<input id="element-toggle" type="checkbox" />

<table id="toggled-element">
<tr><th>Type</th><th>For</th></tr>
<tr><td>aa</td><td>ā</td></tr>
<tr><td>ii</td><td>ī</td></tr>
<tr><td>uu</td><td>ū</td></tr>
<tr><td>"n</td><td>ṅ</td></tr>
<tr><td>.m</td><td>ṃ</td></tr>
<tr><td>~n</td><td>ñ</td></tr>
<tr><td>.t</td><td>ṭ</td></tr>
<tr><td>.d</td><td>ḍ</td></tr>
<tr><td>.n</td><td>ṇ</td></tr>
<tr><td>.l</td><td>ḷ</td></tr>
</table>

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;
}