CSSだけでテーブルの行と列を入れ替える方法｜初心者でも簡単にできる実装例つき

※ この記事は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）

---

まとめ｜CSSだけで表の見た目を自在に変える第一歩

writing-mode を使えば、CSSだけでテーブルの行と列を入れ替えたように見せることができます。初心者にも扱いやすく、ちょっとした工夫で表の可読性が大きく向上します。

まずは基本のテクニックとして writing-mode をマスターし、必要に応じてGridやJavaScriptといった他の技術にもチャレンジしていきましょう。

以上、CSSだけでテーブルを自在に見せるための第一歩として、ぜひこの記事を参考に実装してみてください。