![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
テーブルの行を折りたたみたいのですが、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
PHPでこのコード自体に意味は無いんですけど、上のifと下のifの違いってなんですか?個人的には下の
PHP
-
5
WEBサイトの作成で、imgタグには現在もwidthとheightの指定が推奨ですか?
HTML・CSS
-
6
Javascript で共通の処理をどこまでまとめるべきか分からないのでアドバイスお願い致します
JavaScript
-
7
なんでブラウザでPHPを動かすためだけにOSにPython2(Python3)を入れて、C(GCC)
PHP
-
8
プログラミング ソースコード
その他(プログラミング・Web制作)
-
9
JavaScript 超初心者です。 Document.writeがなぜか反映されません。何が間違っ
JavaScript
-
10
javascriptで質問です。 displayプロパティを使用してテーブルの一部を表示・非表示をし
JavaScript
-
11
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
12
スカラーのベクトル微分
その他(プログラミング・Web制作)
-
13
index.phpって何ですか? 具体的に教えてください
PHP
-
14
プログラミング
その他(プログラミング・Web制作)
-
15
index.phpに入るには、どうすればいいですか?
PHP
-
16
ブラウザ自体の事じゃなくてJavaScriptで書かれたブラウザ上で動作するアプリのことをなんといい
JavaScript
-
17
複数のフォルダを同時に参照したいが、上手い方法がわからない
UNIX・Linux
-
18
Javascriptエラーの原因が分からない
JavaScript
-
19
テキストファイルのフィールド行のみ削除したい
Visual Basic(VBA)
-
20
コードを書いて下さい( ; ; )写真有り
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
テーブルのセルにアンカー
-
テーブルタグのセルの幅の一部...
-
テーブルの任意の列を非表示に...
-
文字列が入っているtdを削除せ...
-
tableの中で<p>タグを使うと…
-
htmlのtable内に画像
-
トーナメント表の製作
-
HTMLのテーブルで桁をそろ...
-
右側がおかしくなる
-
線が一番細いテーブル
-
テーブルのヘッダとボディの幅...
-
マウスカーソルを乗せた時にテ...
-
テーブルの表示がずれます
-
ホームページのテーブルの作成...
-
dreamweaverで本文を2段組にす...
-
逆L字の表(table)組み
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
cssで、表示されるテキストによ...
-
テーブルのセルに画像をピッタ...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
テーブルの表示がずれます
-
HTML <td></td>タグ セル内余...
-
HTMLのテーブルで桁をそろ...
-
中に<table></table>が使えるア...
-
スタイルシートで colspan=3と...
-
htmlのtable内に画像
-
ホームページ 表の上の余白を...
-
テーブルタグのセルの幅の一部...
-
テーブルの行の高さを指定する...
-
CSSだけで<table>の<td>や<tr>...
-
表の1列だけをCSSを使って右揃...
おすすめ情報