CSS TABLE ヘッダ固定で縦スクロール
2016年10月1日 HTML/CSS コメント (1)
TABLEを表示させたいが、行が多いので縦スクロールバーを表示させたい時に有効。
添付画像の緑枠内がヘッダなので固定する箇所で、赤枠内がスクロールバー。
要点としては下記の3点。
【テーブルをブロックで囲う】
thead, tbody{
display: block;
}
【縦サイズを指定し、スクロールを指定する】
※tbodyに対して行う
tbody {
height: 100px;
overflow-y: scroll;
}
追記
スクロールを常時表示させたくない場合は、overflow-y: scroll; を overflow-y: auto; に変更する。
▼サンプルコード
<!DOCTYPE html>
<html>
<head>
<title>cssTableTest</title>
<style type="text/css">
thead, tbody{
font-size: 14px;
display: block;
}
thead {
text-align: center;
}
tbody {
height: 100px;
overflow-y: scroll;
}
th {
border: solid #000000 1px;
background-color: #AACCFF;
}
td {
border: solid #000000 1px;
background-color: #EEEEEE;
}
.no {
width:40px;
text-align: center;
}
.name {
width:300px;
text-align: left;
}
.level {
width:80px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS TABLE Test</h1>
<table class="tablecss">
<thead>
<tr>
<th class="no">No</th>
<th class="name">名称</th>
<th class="level">ITSSレベル</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no">1</td>
<td class="name">ITパスポート試験 </td>
<td class="level">1</td>
</tr>
～省略
</tbody>
</table>
</body>
</html>
