セル幅を変更出来るテーブルのサンプル 📖

日本語プログラミング言語「なでしこ」 Advent Calendar 2024、九日目の記事用。ヘッダ部分をドラッグしてセル幅を変更出来ます。

プログラム: (→大)
# テーブルを作成 テストテーブル＝「名前,ふりがな,点数 太郎,たろう,55 花子,はなこ,100 一郎,いちろう,80」のテーブル作成。 # ヘッダの設定 変数 全ヘッダ＝テストテーブルの「th」をDOM子要素全取得。 母艦＝DOM親要素。 全ヘッダを反復: # ヘッダの余白サイズを調べ、ヘッダの余白は0にする。 WINDOWの「getComputedStyle」を対象でJSメソッド実行。 余白サイズ＝それ.padding。//.余白 //できない 最小幅＝それ.width。 対象.余白＝0。 # ヘッダのテキストを新しく作ったdivの中にうつす テキスト＝対象のテキスト取得。 対象に空をテキスト設定。 対象にDOM親部品設定。 「div」のDOM部品作成。 それにテキストをテキスト設定。 # リサイズの設定。horizontalが横幅。 # overflowがvisibleになっているとresizeが効かない # min-widthでヘッダの幅より小さくならないようにする。 # ヘッダの余白をうつす それに{ "resize":"horizontal", "overflow":"hidden", "min-width":最小幅, "余白":余白サイズ }をDOMスタイル一括設定。 母艦にDOM親部品設定。