HTML、CSS、Twitter Bootstrapで実現！テーブルの固定ヘッダーとスクロール可能なボディ
2024-04-09
HTML、CSS、Twitter Bootstrapを用いて、テーブルのヘッダーを固定し、ボディ部分をスクロールできるようにする方法について解説します。
目次
- HTML
- CSS
- Twitter Bootstrap
以下のコードは、固定ヘッダーとスクロール可能なボディを持つテーブルの構造を示しています。
<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>
</tbody>
</table>
<thead>要素はテーブルのヘッダー部分を表します。
以下のコードは、ヘッダーを固定し、ボディ部分をスクロールできるようにするためのCSSです。
table {
width: 100%;
border-collapse: collapse;
}
thead {
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-color: #fff;
}
tbody {
height: 200px;
overflow-y: auto;
}
table要素にwidth: 100%を指定することで、テーブル幅をブラウザの幅に合わせます。border-collapse: collapseを指定することで、セル間の余白を消去します。thead要素にposition: fixedを指定することで、ヘッダーを固定します。top: 0とleft: 0を指定することで、ヘッダーをブラウザの左上に配置します。z-index: 1を指定することで、ヘッダーをボディ部分の上に表示します。background-color: #fffを指定することで、ヘッダーの背景色を白にします。tbody要素にheight: 200pxを指定することで、ボディ部分の高さに200pxを設定します。overflow-y: autoを指定することで、ボディ部分に垂直スクロールバーを表示します。
Twitter Bootstrapを用いると、より簡単に固定ヘッダーとスクロール可能なテーブルを作成することができます。
以下のコードは、Twitter Bootstrapを用いてテーブルを作成する例です。
<table class="table table-bordered table-hover">
<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>
</tbody>
</table>
table要素にclass="table table-bordered table-hover"を指定することで、Bootstrapのテーブルスタイルを適用します。
補足
- 上記のコードは基本的な例です。必要に応じて、コードを編集してカスタマイズすることができます。
- テーブルの幅や高さ、ヘッダーの背景色など、デザインは自由に変更できます。
- スクロールバーの幅や位置なども調整できます。
- より高度なカスタマイズを行うには、JavaScriptを使用する必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定ヘッダーとスクロール可能なテーブル</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqx61gVWgIGroq47DC62Jl378gN38DbqZ9Qj70Y196kaNVzNiL74az1l" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>固定ヘッダーとスクロール可能なテーブル</h1>
<table class="table table-bordered table-hover">
<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>
table {
width: 100%;
border-collapse: collapse;
}
thead {
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-color: #fff;
}
tbody {
height: 200px;
overflow-y: auto;
}
実行結果
上記のコードを実行すると、以下の図のような固定ヘッダーとスクロール可能なテーブルが表示されます。
- 上記のコードは、Bootstrap 4.5.2を用いています。
固定ヘッダーとスクロール可能なテーブルを作成する他の方法
position: sticky を使用する方法
CSSの position: sticky プロパティを用いることで、要素をスクロールするまで固定し、その後はスクロールに追従させることができます。
<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>
</tbody>
</table>
table {
width: 100%;
border-collapse: collapse;
}
thead {
position: sticky;
top: 0;
background-color: #fff;
}
tbody {
height: 200px;
overflow-y: auto;
}
JavaScriptを用いることで、より高度なカスタマイズを行うことができます。
- スクロールイベントを監視し、ヘッダーを固定したり、スクロールに追従させたりする。
どの方法を選択するべきかは、以下の要素を考慮する必要があります。
- 作成したいテーブルの複雑さ
- 必要な機能
- 開発スキル
シンプルなテーブルであれば、position: sticky を使用する方法で十分です。
開発スキルに自信がない場合は、ライブラリを使用することを検討すると良いでしょう。
html css twitter-bootstrap
