【JavaScript不要！CSSだけで高機能UI】CSSだけで折り畳みテーブル

こういう「テーブルを一部非表示」というギミックは、JavaScriptでしかできないというのが今までの常識でした。

ですが、疑似クラス:has() の登場で、その常識は一変しました。
JavaScriptなしでも、このようなUIが HTML＋CSS のみで書けるようになったんです。

こちら、CSS（後述）を設置後に、テーブルを

<div class="tableclose">
  ～～テーブルHTML～～
  <label><input type="checkbox"></label>
</div>

で囲むだけで発動いたします。

ボタンの文字とかデフォルトの表示行数は

<div class="tableclose">
  ～～テーブルHTML～～
  <label data-open-text="▼クリックで開きます" data-close-text="▲クリックで閉じます" data-show="4"><input type="checkbox"></label>
</div>

と、<label>に属性を加えることで制御可能です！

デフォルトで開く値（data-show）は、10までを想定してのCSSになります。
（テーブルを閉じていたいのに、最初から10行を超えて開きたい、ということはあまりないでしょうから…）
data-show がない場合は4行デフォルト表示、data-open-textとdata-close-textがない場合はCSSで登録しているテキストの表示になります。

こちら、WordPress にてブロック化されたい方はご依頼くださいm(_ _)m

HTML と CSS のコードを以下にご紹介いたします。
コピペで使用できます。ご自由に改修していただいてもOKです。
サイト制作の一助になれば、幸いです。