【CSS】flex-grow:1の中にtable作ったら最終行だけ高さが均等じゃなかった

誤差調整?で最後の行の高さが他と違くなる場合がある

flex-grow:1を指定した要素の中にただ単純にtableを作ったら、テーブルの行の高さは均一になると思ったけど、最後の行だけ要素の高さが違った。最終行だけボーダーを引いてなかったり、この更に親要素がflexやgridレイアウトの入れ子になっているからだろうか。
誤差レベルだけど、こんな感じの表をいくつも並べてたんで、全体的にきれいじゃなかった。

flex-grow:1とはflexレイアウトで残り全部っていう指定ができる便利なプロパティ。

こんな感じの表を作りたくて、ハマりました。

table3を親要素いっぱいにしたかったけど、単純にflex-grow:1を指定しただけだと、table1とtable2の1行あたりの高さがtable3と揃わない。(table1~3は共通CSS)

FLIPアニメーションという手法を学んだばっかりだったので、その要領で、一旦flex-grow:1を設定した完成状態でtable3のtrの高さをJavaScriptで取得して、その高さをtable1, table2のtrに指定すればflex-grow:1を指定しなくても、親要素いっぱいの高さで作りたい表ができるのでは！と思っていたら、他のsectionの表と高さが合いませんでした。ひどいのは6pxくらいズレました。

最終的には、table自体の高さとtrの数を取得して、割り算しました。

const getTrHeight = (table) => {
    // 一旦、flex-grow:1を設定(この場合は親要素で囲ってたので親要素に)
    table.parentElement.style.flexGrow = "1";

    // テーブルの高さを出す
    const tableHeight = table.getBoundingClientRect().height;

    // セルの行数(trの数)を取得する
    const nTr = table.querySelectorAll("tr").length;
    
    // 割り算で1行あたりのなるべく正確な高さを出す。
    const trHeight = Math.floor(tableHeight / nTr * 100) / 100;

    // flex-growをもとに戻す
    table.parentElement.style.flexGrow = "";
    return trHeight;
}