【保存版】HTMLテーブルの「tbody」を快適に操作！ スクロールバーの追加方法と応用例

2024-06-14

HTMLとCSSで「tbody」の高さを設定し、スクロールバーを表示する方法

そこで、以下の2つの方法をご紹介します。

方法1： 「tbody」と「tr」にスタイルを適用する

この方法は、比較的シンプルで、幅と高さを設定するだけで済みます。

<table>
  <thead>
    <tr>
      <th>項目1</th>
      <th>項目2</th>
      <th>項目3</th>
    </tr>
  </thead>
  <tbody style="height: 300px; overflow-y: scroll;">
    <tr>
      <td>データ1</td>
      <td>データ2</td>
      <td>データ3</td>
    </tr>
    <tr>
      <td>データ4</td>
      <td>データ5</td>
      <td>データ6</td>
    </tr>
    </tbody>
</table>

方法2： 「tbody」を擬似ブロック要素に変換する

この方法は、より柔軟なレイアウトを可能にする一方で、若干複雑なコードが必要となります。

<table>
  <thead>
    <tr>
      <th>項目1</th>
      <th>項目2</th>
      <th>項目3</th>
    </tr>
  </thead>
  <tbody style="display: block; height: 300px; overflow-y: scroll;">
    <tr>
      <td>データ1</td>
      <td>データ2</td>
      <td>データ3</td>
    </tr>
    <tr>
      <td>データ4</td>
      <td>データ5</td>
      <td>データ6</td>
    </tr>
    </tbody>
</table>

補足

  • 上記のコード例では、高さ300pxに設定していますが、必要に応じて調整してください。
  • スクロールバーの幅を考慮して、実際の「tbody」のコンテンツ領域が狭くなることに注意する必要があります。
  • 複雑なテーブルレイアウトの場合は、より高度なCSSテクニックが必要になる場合があります。

    上記以外にも、JavaScriptを使用して動的に「tbody」の高さを調整する方法もあります。しかし、基本的な仕組みは上記で説明した方法と同様です。



    サンプルコード：HTMLテーブルの「tbody」にスクロールバーを追加

    方法1： 「tbody」と「tr」にスタイルを適用する

    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLテーブルの「tbody」にスクロールバーを追加</title>
  <style>
    table {
      border-collapse: collapse; /* セルの境界線を結合 */
    }
    th, td {
      border: 1px solid #ccc; /* セルの境界線 */
      padding: 5px; /* セルの余白 */
    }
    tbody {
      height: 300px; /* 「tbody」の高さを設定 */
      overflow-y: scroll; /* 垂直方向のスクロールバーを表示 */
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>項目1</th>
        <th>項目2</th>
        <th>項目3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
      </tr>
      <tr>
        <td>データ4</td>
        <td>データ5</td>
        <td>データ6</td>
      </tr>
      <tr>
        <td>データ7</td>
        <td>データ8</td>
        <td>データ9</td>
      </tr>
      <tr>
        <td>データ10</td>
        <td>データ11</td>
        <td>データ12</td>
      </tr>
      <tr>
        <td>データ13</td>
        <td>データ14</td>
        <td>データ15</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

    このコードを実行すると、以下のようになります。

    テーブルの「tbody」部分がスクロールバー付きで表示され、長いコンテンツも折り返さずに閲覧できます。

    方法2： 「tbody」を擬似ブロック要素に変換する

    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLテーブルの「tbody」にスクロールバーを追加</title>
  <style>
    table {
      border-collapse: collapse; /* セルの境界線を結合 */
    }
    th, td {
      border: 1px solid #ccc; /* セルの境界線 */
      padding: 5px; /* セルの余白 */
    }
    tbody {
      display: block; /* 「tbody」を擬似ブロック要素に変換 */
      height: 300px; /* 高さを設定 */
      overflow-y: scroll; /* 垂直方向のスクロールバーを表示 */
      margin: 0 auto; /* 中央配置 */
      width: 80%; /* 幅を調整 */
    }
    tr {
      display: table-row; /* 行要素として表示 */
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>項目1</th>
        <th>項目2</th>
        <th>項目3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
      </tr>
      <tr>
        <td>データ4</td>
        <td>データ5</td>
        <td>データ6</td>
      </tr>
      <tr>
        <td>データ7</td>
        <td>データ8</td>
        <td>データ9</td>
      </tr>
      <tr>
        <td>データ10</td>
        <td>データ11</td>
        <td>データ12</td>
      </tr>
      <tr>
        <td>データ13</td>
        <td>データ14</td>
        <td>データ15</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

    方法1と同様に、テーブルの「tbody」部分がスクロールバー付きで表示されます。

    説明

    • 上記のコードは、HTMLとCSSを使用して、HTMLテーブルの「tbody」セクションにスクロールバーを追加する方法を示しています。
    • 方法1では、「tbody」と「tr」要素に直接スタイルを適用することで、高さとスクロールバーを設定しています。
    • 方法2では、「tbody」要素を擬似ブロック要素に変換し、より柔軟なレイアウトを実現しています。
    • どちらの方法も、必要に応じて調整できます。
    • スクロ


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

    方法3： 「table-container」要素を使用する

    この方法は、テーブルを囲む「table-container」要素を作成し、その要素にスタイルを適用する方法です。

    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLテーブルの「tbody」にスクロールバーを追加</title>
  <style>
    table {
      border-collapse: collapse; /* セルの境界線を結合 */
    }
    th, td {
      border: 1px solid #ccc; /* セルの境界線 */
      padding: 5px; /* セルの余白 */
    }
    .table-container {
      height: 300px; /* 「table-container」の高さを設定 */
      overflow-y: scroll; /* 垂直方向のスクロールバーを表示 */
    }
  </style>
</head>
<body>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>項目1</th>
          <th>項目2</th>
          <th>項目3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ1</td>
          <td>データ2</td>
          <td>データ3</td>
        </tr>
        <tr>
          <td>データ4</td>
          <td>データ5</td>
          <td>データ6</td>
        </tr>
        <tr>
          <td>データ7</td>
          <td>データ8</td>
          <td>データ9</td>
        </tr>
        <tr>
          <td>データ10</td>
          <td>データ11</td>
          <td>データ12</td>
        </tr>
        <tr>
          <td>データ13</td>
          <td>データ14</td>
          <td>データ15</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

    この方法は、JavaScriptを使用して動的に「tbody」の高さを調整する方法です。

    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLテーブルの「tbody」にスクロールバーを追加</title>
  <style>
    table {
      border-collapse: collapse; /* セルの境界線を結合 */
    }
    th, td {
      border: 1px solid #ccc; /* セルの境界線 */
      padding: 5px; /* セルの余白 */
    }
  </style>
  <script>
    window.onload = function() {
      const tbody = document.querySelector('tbody');
      const containerHeight = tbody.parentNode.offsetHeight;
      const tableHeight = tbody.querySelector('table').offsetHeight;
      if (tableHeight > containerHeight) {
        tbody.style.height = containerHeight + 'px';
        tbody.style.overflowY = 'scroll';
      }
    };
  </script>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>項目1</th>
        <th>項目2</th>
        <th>項目3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
      </tr>
      <tr>
        <td>データ4</td>
        <td>データ5</td>
        <td>データ6</td>
      </tr>
      <tr>
        <td>データ7</td>
        <td>データ8</td>
        <td>データ9</td>
      </tr>
      <tr>
        <td>データ10</td>
        <td>データ11</td>
        <td>データ12</td>
      </tr>
      <tr>
        <td>データ13</td>
        <td>データ14</td>
        <td>データ15</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

    テーブルのコンテンツ量に応じて、「tbody」の高さとスクロールバーが自動的に調整されます。

    • 方法4は、JavaScriptを使用して動

    html css

    CSSでリンクを無効化！pointer-eventsプロパティの使い方を徹底解説

    デザイン上の理由で、特定のリンクをクリックできないようにしたいまだ準備ができていないページへのリンクを無効化したい画像やボタンなど、本来リンクではない要素にリンク機能を付与したいといったケースが考えられます。CSSのみでリンクを無効にする方法はいくつかありますが、最も一般的な方法は pointer-events プロパティを使用する方法です。...

     
    html css CSSでリンクを無効化！pointer-eventsプロパティの使い方を徹底解説

    CSSルールがグレー表示される？Chromeの要素インスペクタで原因を特定しよう！

    グレー表示される理由はいくつか考えられます。継承されたルール:親要素から継承された CSS ルールはグレー表示されます。これらのルールは、直接編集することはできませんが、重要です。親要素のルールを変更することで、グレー表示のルールを無効にすることができます。...

     
    css google chrome browser CSSルールがグレー表示される？Chromeの要素インスペクタで原因を特定しよう！

    CSSアスタリスク（*）を使いこなすためのヒント：パフォーマンス、特異性、メンテナンス性を考慮したセレクター選び

    すべての要素にスタイルを適用上記コードは、すべての要素の余白とパディングを0に設定します。上記コードは、段落（<p>）要素内のすべての要素（テキスト、画像など）に太字を適用します。属性セレクターと組み合わせて、特定の要素を抽出上記コードは、href属性の値に"example...

     
    css CSSアスタリスク（*）を使いこなすためのヒント：パフォーマンス、特異性、メンテナンス性を考慮したセレクター選び

    JavaScript: classList、className、正規表現を使った要素のクラス判定

    ここでは、JavaScriptで要素にクラスが含まれているかどうかを確認する3つの方法を紹介します。最もシンプルで効率的な方法は、classList プロパティを使用する方法です。classList プロパティは、要素のクラス名のリストを表すオブジェクトです。...

     
    javascript html css JavaScript: classList、className、正規表現を使った要素のクラス判定

    :after疑似要素でWebサイトをもっと魅力的に！CSSとJavaScriptでできるテクニック

    しかし、jQueryには、after() メソッドと css() メソッドを組み合わせることで、:after 疑似要素を操作する方法があります。after() メソッドは、要素の直後にHTMLコンテンツを挿入するために使用されます。引数に空文字を渡すと、:after 疑似要素を表す空のjQueryオブジェクトが返されます。このオブジェクトを使用して、:after 疑似要素のCSSプロパティを変更したり、イベントをバインドしたりすることができます。...

     
    jquery css selectors :after疑似要素でWebサイトをもっと魅力的に！CSSとJavaScriptでできるテクニック

    SQL SQL SQL SQL Amazon で見る


    HTML、CSS、Twitter Bootstrapで実現！テーブルの固定ヘッダーとスクロール可能なボディ
    HTML、CSS、Twitter Bootstrapで実現！テーブルの固定ヘッダーとスクロール可能なボディ

    HTML、CSS、Twitter Bootstrapを用いて、テーブルのヘッダーを固定し、ボディ部分をスクロールできるようにする方法について解説します。目次HTMLCSSTwitter Bootstrap以下のコードは、固定ヘッダーとスクロール可能なボディを持つテーブルの構造を示しています。