HTML テーブルをスクロール可能にする

長いHTMLテーブルでページ全体が縦に伸びないようにするには、意味のあるテーブル構造を高さ制限付きのラッパーで囲み、overflow-y: autoを設定します。内容がその高さを超えるとラッパー内で縦スクロールでき、テーブルの行と列の構造はそのまま保たれます。

CSSでHTMLテーブルを縦スクロール可能にする

このページ全体の例では、高さを200ピクセルに制限したラッパーと、ヘッダーおよび本文を備えたネイティブなテーブルを使います。行数を増やして内容がラッパーより高くなるようにしているため、テーブル領域内をスクロールできます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Scrollable table</title>
  <style>
    .table-scroll {
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid #ccc;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 8px;
      border: 1px solid #ddd;
      text-align: left;
    }
  </style>
</head>
<body>
  <div class="table-scroll" role="region" aria-label="Employee directory" tabindex="0">
    <table>
      <thead>
        <tr><th scope="col">Name</th><th scope="col">Age</th><th scope="col">Country</th></tr>
      </thead>
      <tbody>
        <tr><td>John Doe</td><td>30</td><td>USA</td></tr>
        <tr><td>Jane Smith</td><td>25</td><td>Canada</td></tr>
        <tr><td>Sam Wilson</td><td>28</td><td>UK</td></tr>
        <tr><td>Emily Johnson</td><td>35</td><td>Australia</td></tr>
        <tr><td>Michael Brown</td><td>40</td><td>Germany</td></tr>
        <tr><td>Linda Davis</td><td>22</td><td>France</td></tr>
        <tr><td>James Garcia</td><td>29</td><td>Spain</td></tr>
        <tr><td>Patricia Martinez</td><td>31</td><td>Mexico</td></tr>
        <tr><td>Robert Wilson</td><td>38</td><td>Italy</td></tr>
        <tr><td>Jessica Lee</td><td>27</td><td>Netherlands</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

max-heightでラッパーの高さを制限し、テーブルがそれを超えたときの動作をoverflow-yで指定します。tabindex="0"を付けると、キーボードでこの領域にフォーカスできます。フォーカスして矢印キーを使い、スクロールできることを確認してください。領域のラベルは、支援技術にその領域の内容を伝えます。ブラウザーや支援技術がテーブルの関連性を認識できるよう、<table>、<thead>、<tbody>と見出しセルを維持してください。

縦方向のオーバーフローにはautoとscrollのどちらを使うか

内容がラッパーの範囲を超えたときにスクロールできるようにするには、overflow-y: autoを使います。行が収まる場合にスクロールバー用の領域を確保せずに済みます。overflow-y: scrollは、内容が収まっている場合でもスクロール手段を要求しますが、スクロールバーが画面に表示されるかどうかはOSやブラウザーによって異なります。どちらの場合も、オーバーフローの指定は個々の行ではなくラッパーに設定してください。縦方向の上限を設けるには、高さまたは最大高さの指定が必要です。指定しないとラッパーがテーブルに合わせて伸び、内部スクロールは必要になりません。

ラッパーの指定を手早くコピーするには、次の短いJavaScriptの例を実行します。上で使ったCSSの宣言が表示されます。表示領域に合わせて高さを調整してください。

const rule = [
  ".table-scroll {",
  "  max-height: 200px;",
  "  overflow-y: auto;",
  "}"
].join("\n");
console.log(rule);

.table-scroll {
  max-height: 200px;
  overflow-y: auto;
}

テーブルの意味構造とキーボード操作を維持する

表形式のデータには、汎用的なCSS Gridのセルに置き換えず、実際のテーブル要素を使ってください。Gridはレイアウトに便利ですが、div要素の集まりだけでは、データテーブルとして見出しと各セルの関係が自動的に伝わるわけではありません。この例では、スクロール可能なラッパーに領域としてのラベルを付け、Tabキーで移動できるようにしています。キーボードで、Tabキーを押してラベル付きの領域に移動し、矢印キーでスクロールしてから、さらにTabキーで移動できることを確認してください。ネイティブなテーブル要素にはすでにテーブルの意味的役割があるため、ARIAのテーブルロールを追加する必要はありません。

横スクロールとBootstrapのスタイルを追加する

利用可能な幅より列のほうが広い場合は、.table-scrollにoverflow-x: autoを追加すると、ラッパー内で縦方向だけでなく横方向にもスクロールできます。文字が読みにくくなるほど狭めるのではなく、列に必要な幅をテーブルに確保してください。実際に使う狭いビューポートでページを表示し、すべての列にアクセスできることを確認します。

プロジェクトですでにBootstrapを読み込んでいる場合は、tableやtable-borderedなどのクラスを使って、同じ意味構造を持つテーブルにスタイルを適用できます。これらのクラスが変えるのは表示です。スクロール動作を提供するのは、引き続き高さを制限したラッパーとそのCSSのオーバーフロー指定です。この方法ならスクロール動作を明示でき、Bootstrapの有無にかかわらずテーブルのマークアップを活用できます。