登録画面でテーブルを2つ並べる

お世話になります。

登録画面(印刷画面)にてテーブルを左右に並べたいと思い、

色々とみておりますが、なかなかそれらしいものがありません。

上のテーブル(table1)は行数を増やしたくないというのがあります。

考えとして、

1.テーブルを左右に並べる。

2.table1と下のテーブル(table2)を1つにまとめ、table1の項目のみ

追加ボタンを押しても行を増やさないようにする。

のどちらかが出来ればいいのですが、

https://developer.cybozu.io/hc/ja/community/posts/900001490326-handsontable-%E8%A4%87%E6%95%B0%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%92%E6%A8%AA%E4%B8%A6%E3%81%B3%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

https://developer.cybozu.io/hc/ja/community/posts/115010418386

を見て参考にできそうだったのですが、うまくいきませんでした。

どたなかご教授頂きたく、お願いいたします。

2.の方法が少しわかりにくいかと思いましたが、

下図のようなイメージにできればと思います。

よろしくお願いいたします。

この図のとおりやりたいとしたら、標準のテーブルを頑張ってこねくり回すよりは、標準テーブルは非表示にし、自分で新しくテーブルのUI実装したほうがいいかとおもいます

村濱一樹様

コメントありがとうございます。

すみません、仮にテーブルのUIを実装する場合どうしたらいいのかまったくわかりません。

何かサンプルなど教えていただけないでしょうか?

よろしくお願いいたします。

Tofu さん

少しコーディングが必要ですが、kintone UI Component を使用してはいかがでしょうか。

私自身テーブルの実装は未経験ですが、kintoneに近い見た目でUIを実装できるパーツがあるみたいです。

https://kintone-labs.github.io/kintone-ui-component/latest/Reference/Table/

正攻法でやるなら、上記あげてもらったUIコンポーネントをどうにか駆使するか、
(そこまで自由度高くないかもです)

自分でHTMLのテーブル組んだりって感じですかね。

https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

初学者にとってはレベルはまぁ高いと思います。

ponyo様、村濱一樹様

色々とコメントありがとうございます。

難しくて手が出ないので、もう少し検討してから再トライできればと思います。

ありがとうございました。