
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
りょうsan さん
・・・・・ヘッダー固定のスクロールが可能なテーブル・・・・・・・
例えば、↓
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dis … rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<h2>ヘッダー固定 スクロール能なテーブル</h2>
<div class="col-5">
<table class="table table-bordered">
<thead class="sticky-top">
<tr class="table-primary">
<th>#</th>
<th>列-A</th>
<th>列-B</th>
</tr>
</thead>
<tbody>
<tr class="table-secondary">
<td>1</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-success">
<td>2</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-danger">
<td>3</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-warning">
<td>4</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-info">
<td>5</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-light">
<td>6</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-secondary">
<td>7</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-success">
<td>8</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-danger">
<td>9</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-warning">
<td>10</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-info">
<td>11</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-light">
<td>12</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-secondary">
<td>13</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-success">
<td>14</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-danger">
<td>15</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-warning">
<td>16</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-info">
<td>17</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
<tr class="table-light">
<td>18</td>
<td>セル-A</td>
<td>セル-B</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dis … integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの上下右側にテーブル...
-
2つのテーブルを左右に表示した...
-
テーブル内に画像を表示したい。
-
IE5以上のテーブル幅
-
テーブル内のセル間にスペース...
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
<th>タグを使っても太字にしな...
-
テーブルのセルにアンカー
-
ホームページのテキストを折り...
-
html5のテーブル内でdivのタブ...
-
TRタグの余白をcssで設定するには
-
XHTMLに関する質問 順序が逆に...
-
<fieldset>タグについて
-
画面幅に合わせてテーブルのカ...
-
同じ幅指定のつもりなのに、ブ...
-
table表を横に並べる際の間隔指定
-
HTMLで文とテーブルの間が空く。
-
文字列が入っているtdを削除せ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの位置を細かく指定し...
-
テーブルの横に画像を
-
テーブル内に画像を表示したい。
-
テーブル内でdlタグ使った際の...
-
ウィンドウのサイズを変えても...
-
箇条書きリストのすぐ横に画像...
-
tableのheight指定が効かない
-
商用サイトでスタイルシートか...
-
テーブルの位置について
-
IE以外のブラウザで隙間ができる
-
FOMA対応サイトでの背景指定の...
-
2つのテーブルを左右に表示した...
-
プルダウンの表示位置
-
テーブルでデザインするのはよ...
-
色の指定
-
テーブルの背景を透過する方法
-
このフレームを直してもらいた...
-
これはテーブルでしょうか?
-
表(テーブル)の表示について
おすすめ情報
テーブルの行は、交互に色が変わっているものを予定としております。