テーブルデータを折り返して表示させたい

いつもお世話になっております。
よろしくお願いいたします。

一連のテーブルデータを縦に折り返して表示（画像参照）させる方法を探しています。
※画像の名前はテストデータ・ジェネレータ（https://yamagata.int21h.jp/tool/testdata/）で作成したものです。

添付の画像ははcolumn-countを使って表示させたのですが、折り返し行の罫線が中途半端に表示されてしまうため、頭を悩ませております。それ以外は問題ないのですが・・・良い方法はないものでしょうか。どうぞよろしくお願いいたします。

質問者からの補足コメント

• 早速のご回答ありがとうございます。
  
  データはPythonから流し込むのですが、人数が不定のため区切りの位置（画像で言えば区名）が決められず、出来ればCSSで見た目のいい方法があればと思って質問させていただきました。
  いろいろ質問に不備があって申し訳ありません。
  引き続き、どうぞよろしくお願いいたします。

  No.1の回答に寄せられた補足コメントです。 補足日時：2020/05/20 18:05

No.2 回答者： fujillin 回答日時： 2020/05/20 19:44

No1です

＞データはPythonから流し込むのですが～
PysonからHTMLを出力するのか、ajaxでデータだけを送るのか不明ですが・・・

＞人数が不定のため区切りの位置（画像で言えば区名）が決められず～
データ出力時には人数も確定しているでしょうから、いずれにしろサーバ側で区切り処理をしてしまうのが良いのではないでしょうか？
あるいは、クライアント側のスクリプトで同様の処理を行うという方法も考えられますが、区切り位置の決め方が論理的に決められなければ処理のしようがありません。
HTML出力をするのならなおさらですね。

＞出来ればCSSで見た目のいい方法があればと思って質問させていただきました
trをinline-blockなどにし横幅を固定設定にしておいた上で、tbodyをblockにして、clumnsを「trの幅＋α」 auto のような設定にしておくことで、table幅に応じて縦折返しが行われます。
https://developer.mozilla.org/ja/docs/Web/CSS/co …
（これも確認はChromeのみで行っていますけれど）
ただし、trの幅指定だけだとtdの幅がそろわない可能性がありますので、colやtdの幅も指定しておくほうが安全かと思います。

とはいえ、ここまでバラバラにするならtableで表示する必要があるのかどうかも疑問になって来ますが・・・（笑）

No.1 回答者： fujillin 回答日時： 2020/05/20 17:14

こんにちは

実際はデータをどのように流し込む予定なのか不明ですが、ajaxなどで外部から取得するのであれば、そのままスクリプトで分割すればよろしいかと。

あるいは、区切り位置がわかっているなら（データ何行で折り返すとか）、それぞれをtbodyとして独立させて、親要素のtableに
　table{ display: flex; justify-content: space-between; }
などと指定することで、tbody毎に横並びになります。
（Chrome v81.0 でしか確認していませんが）

以下の様な感じです。
<table>
<tbody>
　第一縦群の<tr><td>の記述
</tbody>
<tbody>
　第二縦群の<tr><td>の記述
</tbody>
<tbody>
　第三縦群の<tr><td>の記述
</tbody>
</table>