HTMLとCSSのみで、縮小/展開出来るテーブルを作りたい。

Question

前提・実現したいこと

HTMLとCSSのみで、縮小/展開出来るテーブルを作りたい。

具体的には、以下のように動作させたいです。

いいサンプルがあれば教えていただけないでしょうか。
このように表示できるのであれば、tableではなくてul・flex等でも構いません。

Answer 1

まず、ご了承いただきたいのが、
サンプルの掲示はいたしません。
（本質問は、自身で書いたコードの記載がない、丸投げ作業依頼系質問だと思うからです）

まず、table要素を使う以上、JavaScriptレスで、クリックアクションによって表示非表示は実現できないので、（できなくないとは思うが、表示が難しかったり、HTMLの文法違反や正しくレンダリングされるものにならない）
CSSにて、table要素と同じ表示を実現したうえで、
（display: table;と、display: table-cell;をうまく使い、divなどにそれを当てて、表示上、table要素と同じ表示にする）
<input type="checkbox">と、input:checked + 表示させたい要素セレクタの技法を使われるといいでしょう。

細かいやり方や、サンプルはご自分でお探しください。
（上記の理由で、掲示しません）

Answer 2

自分も参考になりそうな事だけ（そもそもこの質問文章だけでは少なくとも自分は仕様が把握しけれない上、他の方がおっしゃる通り丸投げのため）

ulとかもありなら、アコーディオンメニューの応用でどうにかなりそうな気がします。

Answer 3

詳細折りたたみ要素のことでしょうか？
イメージ画像のようなきれいなテーブル状態になるかどうかは知らないので、試してみてください。

<details>
    <summary> <!-- 最初から表示されている部分 --> </summary>
    <!-- 折りたたまれている部分 -->
</details>

Answer 4

すくなくとも赤い枠をクリックして開いたり閉じたりはUIとしてわかりづらくてNG
やれてcheckboxとの連携くらいですかね・・・

<style>
#tuika{display:none;}
.tuika{display:none;}
#tuika:checked ~ table .tuika{display:table-row}
#tuika:checked ~ table label.on{display:inline}
#tuika:checked ~ table label.off{display:none}
label.on{display:none}
</style>
<input type="checkbox" id="tuika">
<table border>
<tr>
<td rowspan="6">基本情報<br>
[<label for="tuika" class="on">on</label><label for="tuika" class="off">off</label>]
</td>
<td>氏名</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>住所</td>
<td>&nbsp;</td>
</tr>
<tr class="tuika">
<td>追記1</td>
<td>&nbsp;</td>
</tr>
<tr class="tuika">
<td>追記2</td>
<td>&nbsp;</td>
</tr>
<tr class="tuika">
<td>追記3</td>
<td>&nbsp;</td>
</tr>
<tr class="tuika">
<td>追記4</td>
<td>&nbsp;</td>
</tr>
</table>