
テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませんでした。
テーブル全てならうまくいきました。
例えば情報4〜6のtrタグだけを折りたたむことは出来ないのでしょうか。
どうかご教示ください
<table>
<tr>
<td>情報1</td>
<td>情報2</td>
<td>情報3</td>
</tr>
<tr>
<td>情報4</td>
<td>情報5</td>
<td>情報6</td>
</tr>
No.2ベストアンサー
- 回答日時:
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>
No.3
- 回答日時:
<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>
No.1
- 回答日時:
こんにちは
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>情報1</td>
<td>情報2</td>
<td>情報3</td>
</tr>
<tr>
<td>情報4</td>
<td>情報5</td>
<td>情報6</td>
</tr>
</table>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
中に<table></table>が使えるアコーディオンを教えて下さい。
HTML・CSS
-
テーブルの任意の列を非表示にしたい
HTML・CSS
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
-
4
HTMLからフォルダを開きたい
HTML・CSS
-
5
エクセルのセル内の余白の設定って出来るのでしょうか?
Excel(エクセル)
-
6
CSVファイルの中で、「 , 」カンマを使いたい
その他(コンピューター・テクノロジー)
-
7
tableの要素(tr、td)に一括でスタイルシートを適用したい
HTML・CSS
-
8
異なるスキーマからデータを抽出するには?oracl、PL/SQL
Oracle
-
9
html テーブルのセルにリンクを張りたい
その他(コンピューター・テクノロジー)
-
10
CSSで特定のテーブルだけに適用する記述をおしえてください。
HTML・CSS
-
11
javascriptの基本的なことだと思います。google map
JavaScript
-
12
bodyにidをつける理由は何ですか?
HTML・CSS
-
13
画面表示とともにtableの指定の行位置を表示
JavaScript
-
14
折りたたみを全て開いて別ページに表示させるには?
JavaScript
関連するカテゴリからQ&Aを探す
今、見られている記事はコレ!
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
テーブルのセルにアンカー
-
TRタグの余白をcssで設定するには
-
HTMLで文とテーブルの間が空く。
-
文字列が入っているtdを削除せ...
-
EXCELからhtmlへの変換で罫線が...
-
cssで、表示されるテキストによ...
-
掲示板//インラインフレーム内...
-
テーブルの線の内側の色も指定...
-
テーブル結合 縦横両方するには?
-
テーブル内のセル間にスペース...
-
テーブルタグの中にdivを含めて...
-
<th>タグを使っても太字にしな...
-
ホームページのテキストを折り...
-
html5のテーブル内でdivのタブ...
-
XHTMLに関する質問 順序が逆に...
-
<fieldset>タグについて
-
画面幅に合わせてテーブルのカ...
-
同じ幅指定のつもりなのに、ブ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルの任意の列を非表示に...
-
テーブルのセルに画像をピッタ...
-
TRタグの余白をcssで設定するには
-
中に<table></table>が使えるア...
-
cssで、表示されるテキストによ...
-
テーブルのヘッダとボディの幅...
-
tableにul,または,olを入れられ...
-
ホームページ 表の上の余白を...
-
文字列が入っているtdを削除せ...
-
tableの要素(tr、td)に一...
-
テーブルの表示がずれます
-
テーブルタグのセルの幅の一部...
-
EXCELからhtmlへの変換で罫線が...
-
逆L字の表(table)組み
-
値が0なら非表示にしたい
-
CSSだけで<table>の<td>や<tr>...
-
テーブルの外側の線を消す
-
HTMLで文とテーブルの間が空く。
-
表(テーブル)内の文字サイズ...
おすすめ情報