もう困らない！横幅超過のテーブルを救う！HTMLとCSSで実現するスムーズな横スクロール

2024-06-30

HTML テーブルに水平スクロールバーを追加する方法

ステップ 1: HTML の構造を変更する

テーブルを囲む div 要素を追加します。この要素に overflow-x: auto; を適用することで、水平スクロールバーを表示します。
必要に応じて、div 要素にクラスや ID を追加します。これにより、CSS で簡単にスタイルを設定することができます。

<div class="table-container">
  <table>
    </table>
</div>

ステップ 2: CSS でスクロールバーをスタイリングする

table-container クラスに対して overflow-x: auto; を設定します。
必要に応じて、スクロールバーの外観をカスタマイズするために、::-webkit-scrollbar などの疑似要素セレクタを使用します。

.table-container {
  overflow-x: auto;
}

/* スクロールバーの外観をカスタマイズするためのオプションの CSS */
::-webkit-scrollbar {
  width: 10px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
}

::-webkit-scrollbar-track {
  background: #fff;
}

補足事項:

min-width プロパティを使用して、テーブルの最小幅を設定することで、コンテンツが常に横幅いっぱいに表示されるようにすることができます。
white-space: nowrap を th と td に設定すると、セル内のテキストが折り返されずに表示されます。

この基本的な手順に加えて、以下の点にも注意する必要があります。

レスポンシブデザイン: テーブルが異なる画面サイズで適切に表示されるように、メディアクエリを使用して overflow-x プロパティを調整する必要があります。
アクセシビリティ: スクロールバーがユーザーにとって使いやすいように、適切なラベルとキーボードナビゲーションを提供する必要があります。
パフォーマンス: 非常に大きなテーブルを扱う場合は、パフォーマンスを向上させるために仮想化などの技術を検討する必要があります。

これらの点を踏まえ、状況に合わせて適切な方法を選択することで、HTML テーブルに水平スクロールバーを効果的に追加することができます。

HTML テーブルに水平スクロールバーを追加する - サンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水平スクロールバー付き HTML テーブル</title>
  <style>
    .table-container {
      overflow-x: auto;
      width: 500px; /* テーブルの幅を調整 */
    }

    table {
      border-collapse: collapse;
      width: 100%; /* テーブルを親要素いっぱいに広げる */
    }

    th, td {
      border: 1px solid #ccc;
      padding: 5px;
    }
  </style>
</head>
<body>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
          <th>列3</th>
          <th>列4</th>
          <th>列5</th>
          <th>列6</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ1</td>
          <td>データ2</td>
          <td>データ3</td>
          <td>データ4</td>
          <td>データ5</td>
          <td>データ6</td>
        </tr>
        <tr>
          <td>データ7</td>
          <td>データ8</td>
          <td>データ9</td>
          <td>データ10</td>
          <td>データ11</td>
          <td>データ12</td>
        </tr>
        <tr>
          <td>データ13</td>
          <td>データ14</td>
          <td>データ15</td>
          <td>データ16</td>
          <td>データ17</td>
          <td>データ18</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

CSS

この例では、以下の CSS を使用して、テーブルコンテナの幅を 500 ピクセルに設定し、テーブルの幅を 100% に設定して親要素いっぱいに広げています。また、border と padding を設定して、テーブルのセルにスタイルを追加しています。

.table-container {
  overflow-x: auto;
  width: 500px; /* テーブルの幅を調整 */
}

table {
  border-collapse: collapse;
  width: 100%; /* テーブルを親要素いっぱいに広げる */
}

th, td {
  border: 1px solid #ccc;
  padding: 5px;
}

このコードを編集して、独自のデータとスタイルを追加することができます。

補足:

この例では、シンプルなテーブルを使用しています。実際には、より複雑な構造を持つテーブルを扱う必要があるかもしれません。

HTML テーブルに水平スクロールバーを追加するその他の方法

table-layout: fixed を使用する

この方法は、すべての列の幅を固定し、必要に応じて水平スクロールバーを表示させるというものです。

table {
  table-layout: fixed;
  width: auto; /* テーブルの幅を自動調整 */
}

JavaScript を使用して、テーブルの幅を動的に調整し、必要に応じて水平スクロールバーを表示させることができます。この方法は、より複雑なレイアウトが必要な場合に役立ちます。

<script>
  function adjustTableWidth() {
    var table = document.querySelector('table');
    var containerWidth = table.parentNode.offsetWidth;
    var tableWidth = table.scrollWidth;

    if (tableWidth > containerWidth) {
      table.style.width = containerWidth + 'px';
    }
  }

  window.addEventListener('resize', adjustTableWidth);
  adjustTableWidth();
</script>

overflow-x: visible と white-space: nowrap を使用する

この方法は、セル内のテキストが折り返されずに表示されるようにし、必要に応じて水平スクロールバーを表示させるものです。

table {
  overflow-x: visible;
}

th, td {
  white-space: nowrap;
}

最適な方法を選択する

使用する方法は、テーブルの構造、データ、および要件によって異なります。

シンプルなテーブルで、すべての列の幅が固定されている場合は、table-layout: fixed を使用するのが良いでしょう。
より複雑なレイアウトが必要な場合は、JavaScript を使用する必要があります。
セル内のテキストが折り返されずに表示される必要がある場合は、overflow-x: visible と white-space: nowrap を使用する必要があります。

これらの方法はそれぞれ長所と短所があるため、状況に合わせて適切な方法を選択することが重要です。

html css html-table