初心者でも簡単！HTMLで大きな表（table）をスクロールさせる方法｜横スクロール・縦スクロールのコツ

html

ホームページやブログでたくさんのデータを表（<table>）に並べたとき、横や縦に長すぎてページ全体が崩れてしまうことはありませんか？

そんなときに便利なのが「スクロール機能」です。

スクロールをうまく使えば、表がはみ出さずにきれいに収まるので、見やすく、スマホでも快適に閲覧できます。

この記事では、HTMLとCSSを使って表をスクロールさせる方法を、初心者の方にもわかりやすく解説します。

スポンサーリンク

HTMLのtableを横スクロールさせる方法

overflow-xプロパティを使った基本的な実装

横に長い表はスマホや小さい画面では確実にはみ出してしまいます。そんなときは、divタグで表を囲み、CSSの overflow-x: auto; を使って横スクロール機能をつけます。

基本的な実装例

<div style="overflow-x: auto;">
  <table border="1">
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫数</th>
      <th>カテゴリ</th>
      <th>販売開始日</th>
      <th>メーカー</th>
      <th>評価</th>
    </tr>
    <tr>
      <td>ノートパソコン</td>
      <td>89,800円</td>
      <td>15台</td>
      <td>PC・周辺機器</td>
      <td>2024年1月15日</td>
      <td>○○電機</td>
      <td>★★★★☆</td>
    </tr>
    <tr>
      <td>ワイヤレスマウス</td>
      <td>2,980円</td>
      <td>50個</td>
      <td>PC・周辺機器</td>
      <td>2024年2月10日</td>
      <td>△△製作所</td>
      <td>★★★☆☆</td>
    </tr>
  </table>
</div>

これで、画面が狭いときには自動的にスクロールバーが表示され、横にスクロールできるようになります。

より実用的なスタイリング

単純な横スクロールだけでなく、見た目も整えた実装方法をご紹介します。

<style>
.table-container {
  overflow-x: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 20px 0;
}

.scrollable-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* 最小幅を指定 */
}

.scrollable-table th,
.scrollable-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.scrollable-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}
</style>

<div class="table-container">
  <table class="scrollable-table">
    <thead>
      <tr>
        <th>商品名</th>
        <th>価格</th>
        <th>在庫数</th>
        <th>カテゴリ</th>
        <th>販売開始日</th>
        <th>メーカー</th>
        <th>評価</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ノートパソコン</td>
        <td>89,800円</td>
        <td>15台</td>
        <td>PC・周辺機器</td>
        <td>2024年1月15日</td>
        <td>○○電機</td>
        <td>★★★★☆</td>
      </tr>
    </tbody>
  </table>
</div>

縦にスクロールする表を作る方法

overflow-yと高さを指定した実装

縦に長い表で一部分だけスクロールさせたいときは overflow-y: auto; と height を組み合わせて使います。

基本的な実装例

<div style="height: 200px; overflow-y: auto; border: 1px solid #ccc;">
  <table border="1" style="width: 100%; border-collapse: collapse;">
    <thead>
      <tr style="background-color: #f0f0f0;">
        <th style="padding: 10px;">項目名</th>
        <th style="padding: 10px;">値</th>
      </tr>
    </thead>
    <tbody>
      <tr><td style="padding: 8px;">データ1</td><td style="padding: 8px;">値1</td></tr>
      <tr><td style="padding: 8px;">データ2</td><td style="padding: 8px;">値2</td></tr>
      <tr><td style="padding: 8px;">データ3</td><td style="padding: 8px;">値3</td></tr>
      <tr><td style="padding: 8px;">データ4</td><td style="padding: 8px;">値4</td></tr>
      <tr><td style="padding: 8px;">データ5</td><td style="padding: 8px;">値5</td></tr>
      <tr><td style="padding: 8px;">データ6</td><td style="padding: 8px;">値6</td></tr>
      <tr><td style="padding: 8px;">データ7</td><td style="padding: 8px;">値7</td></tr>
    </tbody>
  </table>
</div>

これで、divの高さを超える部分が縦スクロールになります。

ヘッダー固定の縦スクロール

よりユーザビリティを高めるために、ヘッダーを固定した縦スクロール表を作ることもできます。

<style>
.vertical-scroll-table {
  height: 250px;
  overflow-y: auto;
  border: 1px solid #ddd;
}

.vertical-scroll-table table {
  width: 100%;
  border-collapse: collapse;
}

.vertical-scroll-table th {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  padding: 12px;
  border-bottom: 2px solid #dee2e6;
}

.vertical-scroll-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>

<div class="vertical-scroll-table">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>名前</th>
        <th>部署</th>
        <th>役職</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>001</td><td>山田太郎</td><td>営業部</td><td>課長</td></tr>
      <tr><td>002</td><td>鈴木花子</td><td>人事部</td><td>主任</td></tr>
      <!-- 他のデータ行 -->
    </tbody>
  </table>
</div>

CSSでまとめてきれいに書く方法

インラインスタイルではなく、CSSクラスを使って管理しやすくする方法をご紹介します。

再利用可能なCSSクラス

/* 横スクロール用 */
.table-horizontal-scroll {
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 縦スクロール用 */
.table-vertical-scroll {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 両方向スクロール用 */
.table-both-scroll {
  height: 300px;
  overflow: auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 共通のテーブルスタイル */
.styled-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

.styled-table th,
.styled-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.styled-table th {
  background-color: #f2f2f2;
  font-weight: 600;
  color: #333;
}

.styled-table tr:hover {
  background-color: #f5f5f5;
}

使用例

<!-- 横スクロール -->
<div class="table-horizontal-scroll">
  <table class="styled-table">
    <!-- テーブル内容 -->
  </table>
</div>

<!-- 縦スクロール -->
<div class="table-vertical-scroll">
  <table class="styled-table">
    <!-- テーブル内容 -->
  </table>
</div>

<!-- 両方向スクロール -->
<div class="table-both-scroll">
  <table class="styled-table">
    <!-- テーブル内容 -->
  </table>
</div>

レスポンシブデザインでの応用

スマートフォンやタブレットでも快適に使える表を作るためのテクニックをご紹介します。

メディアクエリを使った最適化

/* デスクトップ用 */
.responsive-table-container {
  overflow-x: auto;
}

/* タブレット以下 */
@media (max-width: 768px) {
  .responsive-table-container {
    font-size: 14px;
  }
  
  .responsive-table-container table {
    min-width: 500px;
  }
}

/* スマートフォン */
@media (max-width: 480px) {
  .responsive-table-container {
    font-size: 12px;
  }
  
  .responsive-table-container th,
  .responsive-table-container td {
    padding: 8px 6px;
  }
}

タッチデバイス対応

.touch-scroll-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS でスムーズスクロール */
}

.touch-scroll-table::-webkit-scrollbar {
  height: 8px;
}

.touch-scroll-table::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.touch-scroll-table::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

.touch-scroll-table::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

よくある疑問と注意点

tableに直接overflowをつけてもダメ？

table 要素に overflow プロパティを直接指定しても効果は出ません。これは、table 要素の表示特性によるものです。

正しい方法：

  • div や section などのブロック要素で囲む
  • その囲み要素に overflow を指定する

間違った例：

table {
  overflow-x: auto; /* 効果なし */
}

正しい例：

.table-wrapper {
  overflow-x: auto; /* 効果あり */
}

画面が広いときもスクロールバーは出る？

overflow-x: auto; を使うと、必要なときだけスクロールバーが表示されます。これは非常に便利で、以下のような動作をします：

  • 表が容器より小さい場合：スクロールバーは表示されない
  • 表が容器より大きい場合：スクロールバーが自動的に表示される

パフォーマンスの考慮事項

大きなテーブルでスクロールを使用する際の注意点：

仮想スクロール

データが非常に多い場合（1000行以上）は、仮想スクロールの導入を検討してください。

CSSの最適化

.optimized-scroll-table {
  overflow-x: auto;
  will-change: scroll-position; /* スクロール性能向上 */
  transform: translateZ(0); /* ハードウェア アクセラレーション */
}

アクセシビリティの向上

キーボードナビゲーション対応

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

.accessible-table-container:focus {
  outline: 2px solid #007cba;
  outline-offset: 2px;
}

<div class="accessible-table-container" tabindex="0" role="region" aria-label="スクロール可能なテーブル">
  <table>
    <!-- テーブル内容 -->
  </table>
</div>

スクリーンリーダー対応

<div class="table-container" role="region" aria-label="商品一覧表" aria-describedby="table-description">
  <p id="table-description">この表は横スクロールできます。矢印キーで移動してください。</p>
  <table>
    <caption>商品一覧</caption>
    <!-- テーブル内容 -->
  </table>
</div>

実践的な応用例

データテーブルの完全な実装例

<style>
.data-table-container {
  overflow-x: auto;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.data-table th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px 12px;
  text-align: left;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s ease;
}

.data-table tr:hover {
  background-color: #f8f9ff;
}

.data-table tr:nth-child(even) {
  background-color: #fafbfc;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .data-table-container {
    font-size: 14px;
  }
  
  .data-table th,
  .data-table td {
    padding: 10px 8px;
  }
}
</style>

<div class="data-table-container">
  <table class="data-table">
    <thead>
      <tr>
        <th>商品ID</th>
        <th>商品名</th>
        <th>価格</th>
        <th>在庫数</th>
        <th>カテゴリ</th>
        <th>登録日</th>
        <th>ステータス</th>
        <th>アクション</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>P001</td>
        <td>ワイヤレスマウス</td>
        <td>2,980円</td>
        <td>45個</td>
        <td>PC周辺機器</td>
        <td>2024-01-15</td>
        <td><span style="color: green;">在庫あり</span></td>
        <td><button>編集</button></td>
      </tr>
      <tr>
        <td>P002</td>
        <td>メカニカルキーボード</td>
        <td>12,800円</td>
        <td>8個</td>
        <td>PC周辺機器</td>
        <td>2024-01-18</td>
        <td><span style="color: orange;">残り少</span></td>
        <td><button>編集</button></td>
      </tr>
    </tbody>
  </table>
</div>

まとめ

HTMLで表をスクロールさせる方法について詳しく解説しました。重要なポイントをまとめると：

基本的な実装方法

  • 横スクロール：div style="overflow-x: auto;"
  • 縦スクロール：div style="height: ○○px; overflow-y: auto;"
  • 両方向スクロール：div style="height: ○○px; overflow: auto;"

実践的なテクニック

  • CSSクラスを使った管理しやすい実装
  • レスポンシブデザインでの最適化
  • アクセシビリティの向上
  • パフォーマンスの考慮

注意すべき点

  • table 要素に直接 overflow は効かない
  • 必ず div などの囲み要素を使用する
  • overflow: auto で必要なときだけスクロールバーを表示

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました