[css]tableのレイアウトを変更する場合のメモ

display:block;の時代は終わった。

こういう感じ
gridで指定するメリット
まとめ

こういう感じ

こういうのがあったとして。

<table>
    <tr><th colspan="2"></th><td colspan="2"></td></tr>
    <tr><th></th><td></td><th></th><td></td></tr>
    <tr><th></th><td></td><th></th><td></td></tr>
    <tr><th></th><td></td><th></th><td></td></tr>
</table>

PC・SPとかで表示を変えたい場面が偶にある。table自体を切り替えるんじゃなくてcssで調整するのはよくある。

で、一般的に全部縦並びにするならこう。

table{
    width: 100%;
    tr{
        width: 100%;
        display: block;
        :is(th,td){
            width: 100%;
            display: block;
        }
    }
}

昔ながらって感じですね。

1行2列にしたい場合、display:block;だとこうなる。

table{
    width: 100%;
    tr{
        width: 100%;
        display: block;
        :is(th,td){
            display: block;
            float: left;
        }
        th{
            width: 80px;
            clear: both;
        }
        td{
            width: calc(100% - 80px);
        }
    }
}

display:grid;だとかなり楽になる。

他の人は知らないけど個人的にすごく楽になる。

table{
    width: 100%;
    tr{
        width: 100%;
        display: grid;
        grid-template-columns: 80px 1fr;
    }
}

table関連の設定はgrid付与で吹っ飛ぶので上書きするものがめっちゃ少ない。

線を入れる場合はblockのときと同様に、重ならないのでmarginで調整する。

table{
    width: 100%;
    tr{
        width: 100%;
        display: grid;
        grid-template-columns: 80px 1fr;
        :is(th,td){
            margin-top: -1px;
            border: 1px solid #000;
        }
        td{
            width: calc(100% + 1px);
            margin-left: -1px;
        }
    }
}

marginでマイナス値を振ることで線を重ねられる。

線を重ねるとその分短くなる。

重なる分、tableは縮む。上下はいいんだけど幅が縮むのはよろしくないので、左右の調整はtdのところみたいにborderの厚みをwidthに追加する。

gridで指定するメリット

上の例みたく1行2列（th+td）で言えば、<th>が1行、<td>が2行の高さだった場合は<th>は<td>よりも高さが低くなる。当然だけど。行内にある要素のそれぞれがそれぞれの高さを持ってる。そうすると、要素に枠線を引いてたり背景色をつけたりしてたらその高さのところで終わってしまうので見てくれがすごく悪くなる。

gridは行内の要素の高さが自動的に統一されるのでそういうデザイン崩れが起きない。

最高ですね。

まとめ

floatへの苦手意識が強すぎて極力避けるようにしてる。

そのために全部縦並びにしてたんだけど、gridを使えばfloatを使わずに自由なカスタムができるようになった。

嬉しい。