プロが教える店舗＆オフィスのセキュリティ対策術

テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませ

解決済

  • 質問者：piraniaman
  • 質問日時：
  • 回答数：3件

テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませんでした。
テーブル全てならうまくいきました。
例えば情報4〜6のtrタグだけを折りたたむことは出来ないのでしょうか。
どうかご教示ください


<table>
<tr>
<td>情報１</td>
<td>情報２</td>
<td>情報３</td>
</tr>

<tr>
<td>情報4</td>
<td>情報5</td>
<td>情報6</td>
</tr>

通報する

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

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No1です。



時間があったので、No1の最後の例を少しだけそれっぽくしてみました。
表中の行をクラス設定でグループ化して、グループ単位で表示/非表示を切替えられるようにしてみた例です。
（適当にA、B、Cの3グループにしてあります）
ご参考までに。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#tbl { border-collapse: collapse; }
#tbl caption { margin-bottom: 0.5em; font-weight: bold; }
#tbl label { color: blue; padding-right:1.5em; cursor: pointer; }
#tbl label:before { content: "＋ "; }
#tbl caption input:checked + label:before { content: "－ "; }
#tbl caption input { display: none; }
#tbl td { border: 1px solid gray; padding: 0 1.2em; }
#tbl .B, #tbl .C { display: none; }
#tbl:has(#B:checked) tr.B { display: table-row; }
#tbl:has(#C:checked) tr.C { display: table-row; }
</style>
</head>
<body>
<table id="tbl">
<caption>
<input type="checkbox" id="B">
<label for="B">B群</label>
<input type="checkbox" id="C">
<label for="C">C群</label>
</caption>
<tr><td>A群<td>A-1<td>A-2<td>A-3
<tr class="B"><td>B群<td>B-1<td>B-2<td>B-3
<tr class="C"><td>C群<td>C-1<td>C-2<td>C-3
<tr><td>A群<td>A-4<td>A-5<td>A-6
<tr class="B"><td>B群<td>B-4<td>B-5<td>B-6
<tr><td>A群<td>A-7<td>A-8<td>A-9
<tr class="C"><td>C群<td>C-4<td>C-5<td>C-6
</table>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。大変助かりました。

通報する
お礼日時：2024/03/21 10:53

No.3

  • 回答者： Ogre7077
  • 回答日時：

<details> と <summary> と同じことをするならば、


<tbody> と 最初の<tr> に置き換えてイベント処理を書けばマネできます。

<table>
<tbody>
<tr><th colspan=3>概要1-2-3
<tr><td>情報11<td>情報12<td>情報13
<tr><td>情報21<td>情報22<td>情報33
</tbody>
<tbody>
<tr><th colspan=3>概要4-5-6
<tr><td>情報14<td>情報15<td>情報16
<tr><td>情報24<td>情報25<td>情報36
</tbody>
</table>

<style>
tbody.fold > tr { display:none; }
tbody.fold > tr:first-child { display:table-row; }
</style>
<script>
document.querySelectorAll('table tbody th').forEach(x=>{
_ x.addEventListener('click', ev=>{
_ _ ev.target.closest('tbody').classList.toggle('fold')
_ })
});
</script>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



table要素は全体で一つの表を作成するためのものですので、包含関係が決まっています。
例えば、<tbody>内におけるのは<tr>タグ以外は許されていません。
https://developer.mozilla.org/ja/docs/Web/HTML/E …

どうしても、ご質問のようなことをなさりたければ・・
1）ご質問文にもあるように、表全体であれば可能ですので、必要な単位で表を分割して記述する。

2）CSSでテーブルと同様の表示にする（<table>タグは用いない）
　display: table-row; や display: grid; を用いることで、表と同じような表示にすることが可能です。

3）スクリプトを用いて、行の表示/非表示を切り替える。
　この方法であれば、一つのテーブル内で指定する行の表示/非表示を切り替えられます。

簡単なトリガーであればスクリプトを用いなくても 3）と同様のことはCSSで実現可能です。
以下は、そのような一例のごく簡単なものです。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
td { border: 1px solid gray; }
tr:nth-child(2) { display: none; }
#hoge:checked ~ table tr:nth-child(2) { display: table-row; }
</style>
</head>
<body>
<input type="checkbox" id="hoge" />4~6を表示
<table>
<tr>
<td>情報１</td>
<td>情報２</td>
<td>情報３</td>
</tr>
<tr>
<td>情報4</td>
<td>情報5</td>
<td>情報6</td>
</tr>
</table>
</body>
</html>
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

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

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

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

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

おすすめ情報