HTML テーブル水平スクロール
2024-09-12
HTML テーブルに水平スクロールバーを追加する
HTML
まず、HTMLでテーブルの基本構造を作成します。
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr >
</tbody>
</table>
CSS
次に、CSSでスタイルを適用します。
table {
overflow-x: auto;
}
このコードでは、overflow-x: auto; プロパティを使用しています。これは、テーブルの内容が横方向に溢れた場合に、水平スクロールバーを表示するよう指定します。
具体的な例
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Scrolling Table</title>
<style>
table {
overflow-x: auto;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</ th>
<th>Column 9</th>
<th>Column 10</th >
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
<td>Cell 10</td>
</tr>
</tbody>
</table>
</ body>
</html>
この例では、10列のテーブルを作成し、overflow-x: auto; を適用することで、横方向に溢れた場合に水平スクロールバーが表示されます。
注意
- 他の CSS プロパティを使用して、テーブルの外観をカスタマイズすることもできます。
- 必要な場合、テーブルの幅を固定することもできます。
overflow-x: auto;を適用すると、テーブルの幅は自動的に調整されます。
HTML テーブル水平スクロールのコード解説
HTML コード
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr >
</tbody>
</table>
- <td>
テーブルセルの開始タグです。
CSS コード
table {
overflow-x: auto;
}
- overflow-x: auto;
横方向に溢れた場合に、水平スクロールバーを表示するよう指定しています。 - table
テーブル要素を選択しています。
コードの解説
- HTML コード
テーブルの基本構造を作成します。ヘッダと本体にそれぞれ行とセルを追加します。 - CSS コード
table要素にoverflow-x: auto;プロパティを適用します。これにより、テーブルの内容が横方向に溢れた場合に、水平スクロールバーが表示されます。
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Scrolling Table</title>
<style>
table {
overflow-x: auto;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</ th>
<th>Column 9</th>
<th>Column 10</th >
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
<td>Cell 10</td>
</tr>
</tbody>
</table>
</ body>
</html>
テーブル幅の調整
- 最大幅
テーブルの最大幅を設定し、それ以上広がらないようにすることができます。table { max-width: 800px; /* 任意の最大幅を設定 */ } - 固定幅
テーブルの幅を固定することで、水平スクロールバーを表示することができます。table { width: 800px; /* 任意の幅を設定 */ }
セル幅の調整
- セル幅をパーセンテージで指定
セルの幅をパーセンテージで指定することで、テーブルの幅に応じて自動的に調整されます。td { width: 20%; /* 任意のパーセンテージを設定 */ } - セル幅を指定
個々のセルの幅を指定することで、テーブルの幅を調整することができます。td { width: 100px; /* 任意の幅を設定 */ }
レスポンシブデザイン
- メディアクエリ
画面サイズに応じてテーブルのスタイルを調整することができます。@media (max-width: 768px) { table { overflow-x: auto; } }
JavaScriptによる動的な調整
- スクロールイベント
テーブルのスクロールイベントを検知し、必要に応じて水平スクロールバーを表示または非表示にすることができます。const table = document.querySelector('table'); table.addEventListener('scroll', () => { if (table.scrollLeft > 0) { table.style.overflowX = 'auto'; } else { table.style.overflowX = 'hidden'; } });
html css html-table
