疑似クラス :has() 使用のおりたたみtable

疑似クラス :has() b>の使用テストです。
これは、tableのおりたたみのテストです。
<label>のdata-showパラメータを動的に変更するために、<select>にjavascriptを仕込んでありますが、tableの開閉には全くjavascriptは仕込んでおりません。
また、デフォルトで開く値（data-show）は、10までを想定してのCSSになります。
（テーブルを閉じていたいのに、最初から10行を超えて開きたい、ということはあまりないでしょうから…）
data-show がない場合は4行デフォルト表示、data-open-textとdata-close-textがない場合はCSSで登録しているテキストの表示になります。

「.tableclose」の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>
とすれば、変更できます。