純CSS將HTML的Table的行列互換


CSS 解決方案:將HTML Table的行(row)以及列(column)對調,不需要任何 JavaScript 程式碼。

先看demo,原本的Table是:

TypeFor
aaā
iiī
uuū
"n
.m
~nñ
.t
.d
.n
.l

利用CSS行列互換後變成:

TypeFor
aaā
iiī
uuū
"n
.m
~nñ
.t
.d
.n
.l

解法來自 [3]CSS 程式碼如下:

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

我們甚至還可以透過 CSS 來回切換行列,請按下方『行列互換』的文字數次看結果:



TypeFor
aaā
iiī
uuū
"n
.m
~nñ
.t
.d
.n
.l

上面這個來回切換行列的程式碼如下:

HTML:

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

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

來回切換的技巧說明請看 [4]


參考:

[1]
[2]
[3]javascript - HTML Table with vertical rows - Stack Overflow
[4]Pure CSS Toggle (Show/Hide) HTML Element