重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【解消】通知が届かない不具合について

おしえて

ヘッダー固定のスクロールが可能なテーブルの作成

締切済

  • 質問者：りょうsan
  • 質問日時：
  • 回答数：3件

お世話になっております。
現在、勉強でbootstrap5を使用したWeb画面を作成しておりますが、
そこで首記の通りのテーブルを作成したいと思います。

みなさんは、ヘッダー固定のスクロールが可能なテーブルを作成する際、
参考にされたサイトやプラグインなどございますでしょうか。

質問者からの補足コメント

  • テーブルの行は、交互に色が変わっているものを予定としております。

      補足日時：2021/12/03 17:23
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3

  • 回答者： gura_
  • 回答日時：

りょう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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： t_fumiaki
  • 回答日時：

本人は格好良いと思ってるが、そういうサイトを見た人はサッサ閉じるよ。



ウェブサイト作りの第一歩（初歩）は、見る人が何を望んでるかを知ること。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： sukitaro
  • 回答日時：

position: sticky;を使うのが楽みたいです。



参考：
https://webrandum.net/thead-sticky-table/
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報