trにdisplay:gridをつけてtableをレスポンシブ対応する

Intro

table をスマホで表示する際はせいぜい3列くらいが限界である。調べるとよく出てくる対応策は以下のようなものである。

1. overflow: scroll や position: sticky を駆使して、縦or横スクロール可能にする
2. th や td に display:blockを付けて1カラムにする（プラス data- 属性を付与して項目名を毎行つけるなど）

今回用いるのは tr に display:grid を指定する手法。これで毎行5列のデータを2x4や3x2など、少し複雑なレイアウトに挑戦する。

データ1行を2x4にレイアウトする

<table>
    <thead>
        <tr>
            <th>番号</th>
            <th>都道府県名</th>
            <th>人口</th>
            <th>面積</th>
            <th>いいねの数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>No. 1</td>
            <td>北海道</td>
            <td>5,224,614 人</td>
            <td>83,424 km<sup>2</sup></td>
            <td>10 いいね</td>
        </tr>
        <tr>
            <td>No. 2</td>
            <td>青森県</td>
            <td>1,237,984 人</td>
            <td>9,646 km<sup>2</sup></td>
            <td>20 いいね</td>
        </tr>
        <tr>
            <td>No. 3</td>
            <td>岩手県</td>
            <td>1,210,534 人</td>
            <td>15,275 km<sup>2</sup></td>
            <td>30 いいね</td>
        </tr>
    </tbody>
</table>

table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}
th {
    border: 1px solid #ccc;
    padding: .5rem;
    background-color: #eee;
}
td {
    padding: .5rem;
    border: 1px solid #ccc;
    text-align: center;
}

@media screen and (max-width: 600px) {
    table {
        border: 1px solid #ccc;
    }
    tr {
        display: grid;
        grid-template-columns: 4rem 1fr;
        grid-template-rows: repeat(4, 1fr);
    }
    th:nth-child(1),
    td:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 5;
    }
}

デスクトップ表示

スマホ表示

データ1行を3x2にレイアウトする①

/* ・・・（省略）・・・ */

@media screen and (max-width: 600px) {
    table {
        border: 1px solid #ccc;
    }
    tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    th:nth-child(1),
    td:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
}

データ1行を3x2にレイアウトする② （長さを調整してみる）

@media screen and (max-width: 600px) {
    table {
        border:1px solid #ccc;
    }
    tr {
        display: grid;
        grid-template-columns: 4rem repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    th:nth-child(1),
    td:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    th:nth-child(3),
    td:nth-child(3) {
        grid-column: 3 / 5;
        grid-row: 1 / 2;
    }
    th:nth-child(4),
    td:nth-child(4) {
        grid-column: 2 / 4;
        grid-row: 2 / 3;
    }
}

おわり

ただの grid 講座になってしまった。やはり grid は全てを解決する……と思う反面、これのメンテは大変だ。