Bootstrap を使ってテーブルの行をクリックした時にコンテンツを展開したい

テーブルの各行をクリックした時に行の下にコンテンツを表示する。
一覧に表示する列数が多いけど横スクロールしたくないときに使う。

tr > td の中に div を書いてたりするのでマークアップ警察は見るな

要点

① クリックする行の tr タグに開閉トリガーをつける

<tr data-toggle="collapse" data-target="#collapse-1">

② クリックする行の tr タグの直下に tr > td でラップした開閉コンテンツを設置する
td 要素は1つだけにして, 開閉トリガーの列数分の colspan で結合する

<tr>
    <td colspan="4" class="p-0">
        <div class="collapse" id="collapse-1">
            <p>開閉コンテンツ</p>
            <p>
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
            </p>
        </div>
    </td>
</tr>

感想

個人的にはあまり好きなUIではないので必要に迫られた時以外使いたくない🤔