テーブルの表示列を選択できるようにする方法【HTML/CSS/JavaScript・サンプルコード付き】

テーブル
2026.06.23

テーブルの表示列を選択できるようにする方法

テーブルの表示列を選択できるようにする方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、チェックボックスで表示する列を自由に切り替えられるテーブルを作成します。必要な情報だけを表示できるため、列数の多いテーブルでも見やすく整理できます。

このサンプルコードでは、各列に対応したチェックボックスを用意し、チェックのオン・オフに応じて列の表示状態を切り替えます。不要な列を非表示にできるため、利用者ごとに見たい情報だけを表示できる柔軟なテーブルを実現できます。JavaScriptのみで実装しているため、既存のテーブルへも導入しやすい構成です。

表示列の切り替え機能は、顧客一覧、社員一覧、商品一覧、在庫管理表、売上一覧など、多くの項目を扱う管理画面で活用できます。必要な情報だけを表示することで視認性が向上し、目的のデータを確認しやすくなります。テーブルの使い勝手を改善したい方や、実際に動作するサンプルを参考に導入したい方にもおすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

氏名 所属 役職 電話番号 メール
山口 太郎 営業部 主任 090-1234-5678 yamaguchi@example.com
田中 花子 企画部 課長 080-2345-6789 tanaka@example.com
佐藤 健 開発部 エンジニア 090-3456-7890 sato@example.com
鈴木 美咲 総務部 担当 070-4567-8901 suzuki@example.com
高橋 一郎 経理部 係長 080-5678-9012 takahashi@example.com

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>テーブルの表示列を選択できるようにする方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <div class="table-column-selector_wrap">

    <!-- 表示列選択エリア -->
    <div class="table-column-selector_controls">

      <label>
        <input type="checkbox" data-column="0" checked>
        氏名
      </label>

      <label>
        <input type="checkbox" data-column="1" checked>
        所属
      </label>

      <label>
        <input type="checkbox" data-column="2" checked>
        役職
      </label>

      <label>
        <input type="checkbox" data-column="3" checked>
        電話番号
      </label>

      <label>
        <input type="checkbox" data-column="4" checked>
        メール
      </label>

    </div>

    <!-- テーブル本体 -->
    <table class="table-column-selector_table">

      <thead>
        <tr>
          <th>氏名</th>
          <th>所属</th>
          <th>役職</th>
          <th>電話番号</th>
          <th>メール</th>
        </tr>
      </thead>

      <tbody>

        <tr>
          <td>山口 太郎</td>
          <td>営業部</td>
          <td>主任</td>
          <td>090-1234-5678</td>
          <td>yamaguchi@example.com</td>
        </tr>

        <tr>
          <td>田中 花子</td>
          <td>企画部</td>
          <td>課長</td>
          <td>080-2345-6789</td>
          <td>tanaka@example.com</td>
        </tr>

        <tr>
          <td>佐藤 健</td>
          <td>開発部</td>
          <td>エンジニア</td>
          <td>090-3456-7890</td>
          <td>sato@example.com</td>
        </tr>

        <tr>
          <td>鈴木 美咲</td>
          <td>総務部</td>
          <td>担当</td>
          <td>070-4567-8901</td>
          <td>suzuki@example.com</td>
        </tr>

        <tr>
          <td>高橋 一郎</td>
          <td>経理部</td>
          <td>係長</td>
          <td>080-5678-9012</td>
          <td>takahashi@example.com</td>
        </tr>

      </tbody>

    </table>

  </div>

  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptを別ファイルで管理します。HTMLにテーブルと列選択用のチェックボックスを配置し、CSSでテーブルのデザインを整え、JavaScriptで列の表示・非表示を切り替えます。 

sample/
├── index.html
├── style.css
└── script.js

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。テーブル上部のチェックボックスをオン・オフすると、対応する列の表示状態が切り替わります。表示する項目を利用者が自由に選択できるため、項目数の多いテーブルでも見やすく管理できます。

コメント