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にレイアウトする

```html
<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>
```

```css
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;
    }
}
```

デスクトップ表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91276/425636df-4204-c591-3069-03abd5f2bc89.png)

スマホ表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91276/987cff86-dcf4-bfdb-47b5-b9edd67a66f8.png)

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

```css

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

@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;
    }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91276/2745280f-6f2c-0d4b-566c-ad351154744c.png)

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

```css
@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;
    }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91276/7fe23d67-bae7-9673-4b5d-16d753dc6d29.png)

# おわり

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