HotwireのTurbo Frame, Turbo Streamでテーブル ( table > tbody ) に行 ( tr )を追加するにはどうしたらよいか

身も蓋もない話ですが、できないのでテーブルのようなDOMを他のエレメントで作りましょう。

tbody 要素のドキュメント に書いてあるように、tbody要素の配下には0個以上のtr要素しか置けない。無理やり置いても外に出されてしまう。

そんなこと言ったらul要素だってli,script,templateしか許されないと書いてあるけど、こっちは普通に書けるじゃないか！という話はあってそれは本当にそうなんですが、tableに関してはブラウザが厳しい様子

display: table, display: table-row, display: table-cell などを使えばそれっぽく作ることができる。

Tailwind CSS を使えばこんな感じで。

  <div class="table border-collapse">
    <div class="table-header-group">
      <div class="table-row text-center font-bold">
        <div class="table-cell border">A</div>
        <div class="table-cell border">B</div>
        <div class="table-cell border">C</div>
      </div>
    </div>
    <div class="table-row-group">
      <div class="table-row">
        <div class="table-cell border">foo</div>
        <div class="table-cell border">bar</div>
        <div class="table-cell border">baz</div>
      </div>
      <div class="table-row">
        <div class="table-cell border">hoge</div>
        <div class="table-cell border">fuga</div>
        <div class="table-cell border">piyo</div>
      </div>
    </div>
  </div>

外に出されてしまう例と、TailwindCSS+div+display: table(-xx) で作るtableと、ulの下にはdivが置けるの例は以下に

https://codepen.io/totem3/details/eYdqKYK