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

この記事では、垂直方向にスクロール可能な HTML テーブルを作成する方法を紹介します。

CSS の overflow-y プロパティを scroll に設定して、HTML テーブルをスクロール可能にする

HTML テーブルが長い場合、ページ全体ではなく、テーブルのみをスクロールする機能が必要です。この機能を実現するために、overflow-y プロパティを使用できます。

ここで、y は y 軸を表します。このプロパティは、垂直軸に沿ったブロックレベルの要素のオーバーフロープロパティを定義します。

scroll 値は、ブロックレベルの要素を上から下にスクロール可能にします。

HTML テーブルを垂直方向にスクロール可能にするには、テーブルを <div> でラップします。次に、height プロパティを使用して、<div> の固定高さを設定できます。

その後、overflow-y プロパティを scroll に設定できます。テーブルの高さが設定した div の高さを超える場合、overflow-y: scroll によりテーブルが y 方向（垂直方向）にスクロール可能になります。

したがって、テーブルの高さが <div> の高さを超えていることを確認する必要があります。

たとえば、div を作成し、それに container というクラス名を付けます。その div 内にテーブルを作成し、それに data というクラス名を付けます。

tr、th、および td タグを使用してテーブルにデータを入力します。

CSS で、container クラスを選択し、その height プロパティを 70px に設定し、overflow-y プロパティを scroll に設定します。テーブルの内容の高さが 70px を超えていることを確認してください。

次に、クラスセレクターとテーブルの th および td 要素を使用してテーブルを選択します。次に、その border プロパティを 1px solid black に設定し、border-collapse プロパティを collapse に設定し、padding を 4px に設定します。 （注：これは必須ではありません。これは、テーブルを読みやすくするためです。）

次の例は、テーブルの高さが div または .container の高さよりも高いため、テーブルが垂直方向にスクロール可能であることを示しています。

サンプルコード：

<div class="container">
<table class="data">
<tr>
 <th>id</th>
 <th>Name</th>
 <th>Country</th>
</tr>
<tr>
 <td>1</td>
 <td>John Doe</td>
 <td>Nepal</td>
</tr>
<tr>
 <td>2</td>
 <td>Sam Smith</td>
 <td>India</td>
</tr>
<tr>
 <td>3</td>
 <td>Jack Daniels</td>
 <td>China</td>
</tr>
</table>
</div>

.container {
 height: 70px;
 overflow-y: scroll;
}
.data, th, td {
 border: 1px solid black;
 border-collapse: collapse;
 padding: 4px;
}

その結果、ページをロードするときにテーブル全体が表示されません。コンテナの高さとして 70px を設定したためです。

しかし、垂直に下にスクロールすると、残りのテーブルの内容を見ることができます。

このように、overflow-y プロパティを使用して HTML テーブルを垂直方向にスクロール可能にし、scroll に設定できます。