※ この記事は2025年6月11日に内容をリライトしました。
CSSだけで表の行と列を入れ替えたいと思ったことはありませんか?
Web制作をしていて、表の見せ方に悩んだことはありませんか?
特にスマホなどの縦長画面では、横に広いテーブルは非常に見づらくなります。
そんなときに便利なのが、CSSだけでテーブルの行と列を入れ替えるテクニックです。
「JavaScriptを使わずに、見た目だけを変えられたらいいのに」――そんな悩みを解決できるのが、この記事で紹介する方法です。

結論:writing-mode を使えばCSSだけで表の行列を入れ替え可能です
CSSの writing-mode
プロパティを使うことで、テーブルをあたかも90度回転させたように表示できます。しかも、セル内のテキストは横書きのままに保つことも可能です。つまり、JavaScriptを一切使わず、CSSだけで完結できる方法なのです。
この方法は、構造的なデータはそのままに「見た目だけ」縦横を入れ替えたい場面で特に役立ちます。
CSS writing-mode の基本とテーブルへの適用方法
writing-mode とは?簡単な解説
writing-mode
は、テキストの流れる方向を制御するCSSプロパティです。主に縦書きレイアウトなどに使われますが、表に応用することで行列の見せ方を操作することができます。
horizontal-tb
:横書き(通常の設定)vertical-lr
:縦書き(左から右)
テーブル全体に writing-mode: vertical-lr; を適用
.table-transpose {
writing-mode: vertical-lr;
border-collapse: collapse;
}
セル内テキストは horizontal-tb で横書きを維持
.table-transpose th,
.table-transpose td {
writing-mode: horizontal-tb;
padding: 8px;
border: 1px solid #ccc;
text-align: center;
}
さらに詳しい仕様や対応ブラウザについては、以下の公式ドキュメントも参考になります。
【基礎編】初心者向けのシンプルな実装例
See the Pen 【基礎編】初心者向けのシンプルな実装例 by take it easy (@take-it-easy) on CodePen.
HTML構造の例
<table class="table-transpose">
<tr>
<th>名前</th>
<td>山田</td>
</tr>
<tr>
<th>年齢</th>
<td>28</td>
</tr>
<tr>
<th>職業</th>
<td>エンジニア</td>
</tr>
</table>
CSSの全体コード
.table-transpose {
writing-mode: vertical-lr;
border-collapse: collapse;
}
.table-transpose th,
.table-transpose td {
writing-mode: horizontal-tb;
padding: 8px;
border: 1px solid #ccc;
text-align: center;
background-color: #f9f9f9;
}
【実践編】実務にも使える表で応用してみよう
See the Pen テーブルの行と列の入れ替え by take it easy (@take-it-easy) on CodePen.
HTML(都道府県の表)
<table class="table-transpose">
<thead>
<tr>
<th>県名</th>
<th>自治体名</th>
<th>推定人口</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center">福岡県</td>
<td class="center">福岡市</td>
<td class="right">1,631,409人</td>
</tr>
<tr>
<td class="center">福岡県</td>
<td class="center">北九州市</td>
<td class="right">924,143人</td>
</tr>
<tr>
<td class="center">熊本県</td>
<td class="center">熊本市</td>
<td class="right">737,850人</td>
</tr>
<tr>
<td class="center">鹿児島県</td>
<td class="center">鹿児島市</td>
<td class="right">589,676人</td>
</tr>
<tr>
<td class="center">大分県</td>
<td class="center">大分市</td>
<td class="right">474,314人</td>
</tr>
</tbody>
</table>
CSS(補足あり)
.table-transpose {
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: vertical-lr;
border-collapse: collapse;
}
.table-transpose th,
.table-transpose td {
writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: horizontal-tb;
padding: 3px 5px;
border: 1px solid #ccc;
}
th {
background-color: rgba(0, 0, 0, 0.3);
}
td {
background-color: rgba(0, 0, 0, 0.06);
}
.center {
text-align: center;
}
.right {
text-align: right;
}
他の方法との比較|JavaScriptやGridとの違いは?
JavaScriptで実現する方法との比較
JavaScriptを使えば、HTML構造自体を動的に変換することもできますが、学習コストや実装の複雑さが増します。CSSの writing-mode
なら、スタイルを変えるだけなので簡単です。
CSS Gridとの違い
Gridを使えばもっと柔軟なレイアウトが可能ですが、初心者にとってはやや難易度が高め。まずは writing-mode
を使った方法で慣れるのがおすすめです。
writing-mode のメリットと注意点
- ✅ JavaScript不要
- ✅ コードが少なくて済む
- ⚠ 表の構造がそのままでは並び順に影響があるため、視覚的な変化のみと割り切る必要あり
スマホ対応するには?レスポンシブ対応のコツ
モバイル表示での課題
縦に長くなりすぎたり、列が横に広がりすぎて見づらくなることがあります。
メディアクエリの応用例
@media (max-width: 600px) {
.table-transpose {
writing-mode: horizontal-tb;
}
}
モバイル表示時は通常の表示に戻すことで、可読性を保つことができます。
アクセシビリティの観点
スクリーンリーダーなどでは元のHTML構造に従って読み上げられるため、視覚的な順序変更は音声読み上げに反映されません。重要な情報順は構造上も考慮すべきです。
よくある質問(FAQ)
- Qwriting-mode はすべてのブラウザで使えますか?
- A
はい、主要なモダンブラウザ(Chrome、Firefox、Edge、Safari)でサポートされています。ただし、古いIEでは一部動作が異なることがあります。
- Q表の向きを変えてもソート機能は使えますか?
- A
writing-mode
による変換はあくまで見た目の変更なので、JavaScriptベースのソート機能などはHTML構造のまま動作します。構造的な行列の変換ではないことを理解しておく必要があります。
- QSEOやスクリーンリーダーへの影響はありますか?
- A
表の構造自体は変更されていないため、基本的にSEOには影響しません。ただし、視覚的な順序と実際のHTML構造が異なることで、ユーザー体験や読み上げ順にズレが生じる可能性はあります。
まとめ|CSSだけで表の見た目を自在に変える第一歩
writing-mode
を使えば、CSSだけでテーブルの行と列を入れ替えたように見せることができます。初心者にも扱いやすく、ちょっとした工夫で表の可読性が大きく向上します。
まずは基本のテクニックとして writing-mode
をマスターし、必要に応じてGridやJavaScriptといった他の技術にもチャレンジしていきましょう。
以上、CSSだけでテーブルを自在に見せるための第一歩として、ぜひこの記事を参考に実装してみてください。