tbody要素のみをスクロールさせるためのHTMLとCSS
2024-04-02
HTMLテーブルの縦スクロール
HTML:
<table>
<thead>
<tr>
<th>項目1</th>
<th>項目2</th>
<th>項目3</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
</tr>
</tbody>
</table>
CSS:
table {
width: 100%;
}
tbody {
height: 200px; /* スクロール領域の高さ */
overflow-y: auto; /* 縦スクロールバーを表示 */
}
ポイント
- テーブル全体を100%幅にするには、
table要素にwidth: 100%を指定します。 tbody要素のみをスクロールさせるには、tbody要素にheightとoverflow-yを指定します。heightプロパティは、スクロール領域の高さになります。overflow-yプロパティはautoに設定することで、縦スクロールバーを表示します。
デモ
上記のコードを以下のようにHTMLファイルに記述し、ブラウザで開くと、テーブル全体が100%幅で表示され、tbody要素のみを縦スクロールできることが確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLテーブルの縦スクロール</title>
<style>
table {
width: 100%;
}
tbody {
height: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>項目1</th>
<th>項目2</th>
<th>項目3</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
</tr>
</tbody>
</table>
</body>
</html>
補足
- 上記のコードは基本的な例です。必要に応じて、デザインやレイアウトを調整してください。
thead要素やtfoot要素にもスクロールバーを表示したい場合は、それぞれの要素にheightとoverflow-yを指定します。- より高度なスクロール機能を実装したい場合は、JavaScriptを使用する必要があります。
- 本回答は2024年3月23日時点の情報に基づいています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLテーブルの縦スクロール</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 5px;
}
tbody {
height: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>項目1</th>
<th>項目2</th>
<th>項目3</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
</tr>
<tr>
<td>データ3-1</td>
<td>データ3-2</td>
<td>データ3-3</td>
</tr>
<tr>
<td>データ4-1</td>
<td>データ4-2</td>
<td>データ4-3</td>
</tr>
<tr>
<td>データ5-1</td>
<td>データ5-2</td>
<td>データ5-3</td>
</tr>
</tbody>
</table>
</body>
</html>
- 上記のコードは、以下の点を改善しています。
- テーブルの罫線を
border-collapse: collapse;で消しています。 th要素とtd要素にスタイルを追加しています。- データ行を増やしています。
- テーブルの罫線を
動作確認
上記のコードをHTMLファイルに記述し、ブラウザで開くと、以下のようになります。
- テーブル全体が100%幅で表示されます。
tbody要素のみを縦スクロールできます。- 各列の幅は均等に表示されます。
HTMLテーブルの縦スクロール：その他の方法
方法1：overflow-x: auto; を使用
tbody要素にoverflow-x: auto;を追加することで、横スクロールバーを表示できます。
tbody {
height: 200px;
overflow-y: auto;
overflow-x: auto;
}
方法2：position: sticky; を使用
thead要素にposition: sticky;を追加することで、ヘッダー行を固定できます。
thead {
position: sticky;
top: 0;
}
方法3：JavaScriptを使用
JavaScriptを使用して、より高度なスクロール機能を実装できます。
- スクロールバーの位置を制御
- スクロールイベントを処理
- JavaScriptでテーブルのスクロールを実装する方法: URL JavaScript テーブル スクロール
上記以外にも、様々な方法があります。ご自身の環境や目的に合わせて、最適な方法を選択してください。
html css vertical-scrolling
