テーブルの行を折りたたみたいのですが、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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- PHP htmlのエラーについて(デバッグ) 1 2023/11/13 20:54
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS pythonのコードについてご教示ください 1 2024/01/14 05:39
このQ&Aを見た人はこんなQ&Aも見ています
-
賃貸で可能な古民家風レトロな部屋作りのコツ!改めて知る畳の高い機能性と魅力も紹介
畳の部屋を雰囲気のよい部屋に仕上げたい!賃貸住宅でもできる古民家風のレトロな部屋作りのコツを伺った。
-
jsで質問です。 displayプロパティを用いて下記の情報4〜6のtrタグをボタンで表示・非表示を
JavaScript
-
中に<table></table>が使えるアコーディオンを教えて下さい。
HTML・CSS
-
htmlで<form>~</form>を並べて記述すると一行置きに記述されてしまうのですがこれを回避
HTML・CSS
-
-
4
Javascript で共通の処理をどこまでまとめるべきか分からないのでアドバイスお願い致します
JavaScript
-
5
なんでブラウザでPHPを動かすためだけにOSにPython2(Python3)を入れて、C(GCC)
PHP
-
6
プログラミング ソースコード
その他(プログラミング・Web制作)
-
7
PHPでこのコード自体に意味は無いんですけど、上のifと下のifの違いってなんですか?個人的には下の
PHP
-
8
JavaScript 超初心者です。 Document.writeがなぜか反映されません。何が間違っ
JavaScript
-
9
WEBサイトの作成で、imgタグには現在もwidthとheightの指定が推奨ですか?
HTML・CSS
-
10
Javascriptエラーの原因が分からない
JavaScript
-
11
javascriptで質問です。 displayプロパティを使用してテーブルの一部を表示・非表示をし
JavaScript
-
12
スカラーのベクトル微分
その他(プログラミング・Web制作)
-
13
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
14
コードを書いて下さい( ; ; )写真有り
HTML・CSS
-
15
CSSデータの作成方法について(FTP内)
HTML・CSS
-
16
プログラミング
その他(プログラミング・Web制作)
-
17
index.phpって何ですか? 具体的に教えてください
PHP
-
18
HPレイアウトが同じページのヘッダー画像だけ変えたい
HTML・CSS
-
19
ブラウザ自体の事じゃなくてJavaScriptで書かれたブラウザ上で動作するアプリのことをなんといい
JavaScript
-
20
index.phpに入るには、どうすればいいですか?
PHP
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの任意の列を非表示に...
-
テーブルのセルに画像をピッタ...
-
テーブルの表示がずれます
-
HTMLのrowspan
-
テーブルを2つ横に並べる
-
tableにul,または,olを入れられ...
-
テーブルの行を折りたたみたい...
-
HTMLのテーブルで桁をそろ...
-
セルをまたがるリンク。
-
逆L字の表(table)組み
-
HTML <td></td>タグ セル内余...
-
画像と画像の間の空白
-
ウィキペディアのリンクの仕組...
-
TABLE内の枠線を一部消すには
-
tableコーディング 幅ピッタリ...
-
セル内の文字の色とサイズの指定
-
テーブルの外側の線を消す
-
HTMLで外部ファイルの読み込み
-
スタイルシートで colspan=3と...
-
スクロール付きのテーブルで、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行の高さを指定する...
-
テーブルの表示がずれます
-
ホームページ 表の上の余白を...
-
テーブルのセルにアンカー
-
テーブルタグのセルの幅の一部...
-
逆L字の表(table)組み
-
中に<table></table>が使えるア...
-
tableでcolspanを使うと次行以...
-
スタイルシートで colspan=3と...
-
TABLE内の枠線を一部消すには
-
テーブルの上に空行が入る・・...
おすすめ情報