今回はtableタグのタイトル部分(ヘッダー)を固定する方法を解説致します。
今回使用したサンプルのソースは最後にまとめて記載しておりますので、そちらもご確認ください。
tableのヘッダー(タイトル)を固定しよう!
下記のサンプルをご覧ください。
テーブルの1行目タイトル部分、左端の連番を振ってある部分を固定してあります。
下や右にスクロールしてご確認ください!
名前 | 種族 | 特技 | 備考 | |
---|---|---|---|---|
1 | うぇぶ | ねこ | 仮想通貨取引 | 得になし |
2 | さいと | いぬ | ビットコインのマイニング | ビットコインで大損 |
3 | ほーむ | ねこ | デイトレード | 得になし |
4 | うぇぶ | ねこ | 仮想通貨取引 | 得になし |
5 | さいと | いぬ | ビットコインのマイニング | ビットコインで大損 |
6 | ほーむ | ねこ | デイトレード | 得になし |
7 | うぇぶ | ねこ | 仮想通貨取引 | 得になし |
8 | さいと | いぬ | ビットコインのマイニング | ビットコインで大損 |
9 | ほーむ | ねこ | デイトレード | 得になし |
10 | うぇぶ | ねこ | 仮想通貨取引 | 得になし |
11 | さいと | いぬ | ビットコインのマイニング | ビットコインで大損 |
12 | ほーむ | ねこ | デイトレード | 得になし |
確認したら早速作りかたを一つずつ見ていきます。
固定する部分に「position: sticky」を設定する
上記サンプルは「position:sticky」を設定して固定してあります。
table.table01 th {
/* ヘッダーの見た目に関するスタイル */
background-color: #6b6b6b;
color:#fff;
padding: 10px;
border-bottom: 1px solid #E0E1E3;
border-right: 1px solid #E0E1E3;
/* 固定に関するスタイル */
position: sticky;
top:0;
left: 0;
z-index: 1;
}
「position: sticky」と「top,left」でスクロールした際に、tableの上と左に固定させます。
「z-index: 1」の重なり順もこの次に必要になります。
固定部分の重なり順を指定する
table.table01 thead tr:first-of-type th:first-of-type {
z-index: 2;
}
左上端のテキストが入っていないブロック。
今回はこの部分を重なり順が一番上になるように作成しています。
文章だけだと、なぜ重なり順を指定する必要があるか分かりづらいと思いますので、サンプルを用意いたしました。
下記サンプルを下や右にスクロールしてみてください。
<th>には全て「top:0、left:0」を指定しているので左上端にどんどん重なっていくのが分かると思います。
これを隠すため、「z-index」で重なり順を指定します。
名前 | 種族 | 特技 | 備考 | |
---|---|---|---|---|
1 | うぇぶ | ねこ | 仮想通貨取引 | 得になし |
2 | さいと | いぬ | ビットコインのマイニング | ビットコインで大損 |
3 | ほーむ | ねこ | デイトレード | 得になし |
4 | うぇぶ | ねこ | 仮想通貨取引 | 得になし |
5 | さいと | いぬ | ビットコインのマイニング | ビットコインで大損 |
6 | ほーむ | ねこ | デイトレード | 得になし |
7 | うぇぶ | ねこ | 仮想通貨取引 | 得になし |
8 | さいと | いぬ | ビットコインのマイニング | ビットコインで大損 |
9 | ほーむ | ねこ | デイトレード | 得になし |
10 | うぇぶ | ねこ | 仮想通貨取引 | 得になし |
11 | さいと | いぬ | ビットコインのマイニング | ビットコインで大損 |
12 | ほーむ | ねこ | デイトレード | 得になし |
![tableのヘッダーを固定する画像](https://web-create-kokusyo.com/wp-content/uploads/2023/08/Group-1.png)
tableに「border-collapse: separate」を指定する
このままでも一応は、固定されるのですが、「border-collapse: separate」も指定しておきます。
これを設定しないと、固定されたセルに表示されたborderが消えてしまいます。
なぜかはよくわかりません。使用だと思いますが、考えることをやめました。
ちなみに、「border-collapse: collapse」を指定した場合のサンプルも用意しました。
分かりやすいようborderを赤色にしています。
名前 | 種族 | 特技 | 備考 | |
---|---|---|---|---|
1 | うぇぶ | ねこ | 仮想通貨取引 | 得になし |
2 | さいと | いぬ | ビットコインのマイニング | ビットコインで大損 |
3 | ほーむ | ねこ | デイトレード | 得になし |
4 | うぇぶ | ねこ | 仮想通貨取引 | 得になし |
5 | さいと | いぬ | ビットコインのマイニング | ビットコインで大損 |
6 | ほーむ | ねこ | デイトレード | 得になし |
7 | うぇぶ | ねこ | 仮想通貨取引 | 得になし |
8 | さいと | いぬ | ビットコインのマイニング | ビットコインで大損 |
9 | ほーむ | ねこ | デイトレード | 得になし |
10 | うぇぶ | ねこ | 仮想通貨取引 | 得になし |
11 | さいと | いぬ | ビットコインのマイニング | ビットコインで大損 |
12 | ほーむ | ねこ | デイトレード | 得になし |
赤色の線が流れていくのが分かると思います。
この対策として、「border-collapse: separate」を指定します。
また、HTMLの最新情報を学びたいなら生放送の授業がピッタリ!
最新情報を業界のトップレベルの講師が生放送で授業してくれます。
そんな動画学習でオススメが「Schoo」です。登録・生放送授業は無料!
是非、一度お試しください。
ヘッダー固定に関してのソースまとめ
<div class="table_wrap">
<table class="table01">
<thead>
<tr>
<th></th>
<th>名前</th>
<th>種族</th>
<th>特技</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>うぇぶ</td>
<td>ねこ</td>
<td>仮想通貨取引</td>
<td>得になし</td>
</tr>
<tr>
<th>2</th>
<td>さいと</td>
<td>いぬ</td>
<td>ビットコインのマイニング</td>
<td>ビットコインで大損</td>
</tr>
<tr>
<th>3</th>
<td>ほーむ</td>
<td>ねこ</td>
<td>デイトレード</td>
<td>得になし</td>
</tr>
<tr>
<th>4</th>
<td>うぇぶ</td>
<td>ねこ</td>
<td>仮想通貨取引</td>
<td>得になし</td>
</tr>
<tr>
<th>5</th>
<td>さいと</td>
<td>いぬ</td>
<td>ビットコインのマイニング</td>
<td>ビットコインで大損</td>
</tr>
<tr>
<th>6</th>
<td>ほーむ</td>
<td>ねこ</td>
<td>デイトレード</td>
<td>得になし</td>
</tr>
<tr>
<th>7</th>
<td>うぇぶ</td>
<td>ねこ</td>
<td>仮想通貨取引</td>
<td>得になし</td>
</tr>
<tr>
<th>8</th>
<td>さいと</td>
<td>いぬ</td>
<td>ビットコインのマイニング</td>
<td>ビットコインで大損</td>
</tr>
<tr>
<th>9</th>
<td>ほーむ</td>
<td>ねこ</td>
<td>デイトレード</td>
<td>得になし</td>
</tr>
<tr>
<th>10</th>
<td>うぇぶ</td>
<td>ねこ</td>
<td>仮想通貨取引</td>
<td>得になし</td>
</tr>
<tr>
<th>11</th>
<td>さいと</td>
<td>いぬ</td>
<td>ビットコインのマイニング</td>
<td>ビットコインで大損</td>
</tr>
<tr>
<th>12</th>
<td>ほーむ</td>
<td>ねこ</td>
<td>デイトレード</td>
<td>得になし</td>
</tr>
</tbody>
</table>
</div>
/* 今回テーブルを囲っているクラス
(スクロールが分かりやすいようにheightを設定しています) */
.table_wrap {
overflow: auto;
height: 300px;
}
/* tableのスタイル widthなどはデザインに合わせて要変更 */
table.table01 {
width: 1000px;
min-width: 635px;
margin: 10px 0;
font-size: 1.4rem;
border-spacing: 0px;
border-collapse: separate;
}
/* ヘッダー固定 */
table.table01 th {
background-color: #6b6b6b;
color: #fff;
padding: 10px;
border-bottom: 1px solid #E0E1E3;
border-right: 1px solid #E0E1E3;
position: sticky;
top: 0;
left: 0;
z-index: 1;
}
table.table01 thead table th {
border-top: 1px solid #E0E1E3;
}
/* 左上端を重なり順一番前へ */
table.table01 thead tr:first-of-type th:first-of-type {
z-index: 2;
}
table.table01 tbody td {
padding: 10px;
font-weight: normal;
border-bottom: 1px solid #E0E1E3;
border-right: 1px solid #E0E1E3;
}