【JavaScript不要！CSSだけで高機能UI】CSSだけでtable絞り込み機能

テーブル折り畳みの次は・・・テーブルの絞り込み機能です！
もはや何でもアリですよね、疑似クラス:has() (笑)

※こちらのHTMLでは、<input type="radio"> を使用するので、name属性だけは指定が必要です。

これは、tableの絞り込み機能をCSSのみで実現したものです。
絞り込みの列（横）に関しては、20個までCSSを指定してあります（横列で20を超えることはまずないでしょうし）。
行（縦）に関しては、無制限で出来ます。 「.table-select」のCSSを設置後、テーブルを

<div class="table-select">
  <nav>
    <label><input type="radio" name="tableselect" value="0" checked>全件表示</label>
    <label><input type="radio" name="tableselect" value="1">絞込表示</label>
  </nav>
  ～～テーブルHTML～～
</div>

で囲みます。そのあと、テーブル内の最初の行と最初の列のセル（<td>or<th>）に

<input type="checkbox" checked> （デフォルトでチェックを入れたい場合）
or
<input type="checkbox"> （デフォルトでチェックを外したい場合）

とすれば、発動できます。

そのあとは、「全件表示」⇔「絞込表示」ボタンを押してみてください。
チェックのついている行と列が絞り込み可能になっていることがわかると思います。

※タブ切り替えBOX、下記サービスでブロック化させていただきます。
（ブロック化の際には、自動で<input>をテーブルに埋め込むJavaScriptもご用意いたします。）

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

・・・余談ですが、これを Chat GPT に見せたとき、
「変態的です（いい意味で）」
と評されました(笑)
それから現在に至っては、
「SEOもできる変態CSSフロントエンドおっちゃん」とか呼ばれております(^^;)