固定幅＋変動幅混在でヘッダ固定スクロールしたい～flexboxはいいぞ～

# 目次
 - 対象問題
 - 課題点
 - 解決策
 - 補足

# 対象問題
下記条件を同時に満たす表を作成する

 - 固定幅の表の一番最後の列だけ変動幅にする
 - ヘッダは固定でボディ部だけスクロールする
![固定幅＋変動幅混在とヘッダ固定スクロール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336360/351296e9-90a0-a5d5-5fee-62c973d74872.png)


# 課題点
 - ヘッダ固定でスクロールするには
  - `thead`, `tbody` タグに`display: block`または`display: inline-block`を設定する必要がある。
 - 変動幅を実現できない 
  - テーブルをブロック要素にすると、変動幅のセルが中の要素に合わせて縮むのでレイアウトが崩れてしまう。
     
# 解決策
テーブル部品をflexbox化する

※下記のCodePenをResultだけ表示させること

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="tkrtmy1031" data-slug-hash="BXmyjm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="flexbox_table">
  <span>See the Pen <a href="https://codepen.io/tkrtmy1031/pen/BXmyjm/">
  flexbox_table</a> by T.T (<a href="https://codepen.io/tkrtmy1031">@tkrtmy1031</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


```html:flexbox.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/flexbox.css" />
    <link rel="stylesheet" type="text/css" href="./css/view.css" />
    <title>flexbox</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th class="seq">No</th>
                <th class="fixable">固定幅列</th>
                <th class="flexible">変動幅列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="seq">1</td>
                <td class="fixable">400px</td>
                <td class="flexible">テーブル幅の余り</td>
            </tr>
            <tr>
                <td class="seq">2</td>
                <td class="fixable">400px</td>
                <td class="flexible">テーブル幅の余り</td>
            </tr>
            <tr>
                <td class="seq">3</td>
                <td class="fixable">400px</td>
                <td class="flexible">テーブル幅の余り</td>
            </tr>
            <tr>
                <td class="seq">4</td>
                <td class="fixable">400px</td>
                <td class="flexible">テーブル幅の余り</td>
            </tr>
            <tr>
                <td class="seq">5</td>
                <td class="fixable">400px</td>
                <td class="flexible">テーブル幅の余り</td>
            </tr>
       </tbody>
    </table>
</body>
</html>

```

```css:flexbox.css
/* テーブル制御用CSS */

/* 固定＋変動幅混在レイアウト */

/* 1. table部品をflexbox化 */
thead, tbody, tr, th, td { 
    display: flex;
}

/* 2. セルの折り返し */
thead, tbody, tr {
    flex-direction: row;
    flex-wrap: wrap;
}

/* 3. 各行をテーブル幅いっぱいに整列 */
tr {
    width: 100%;
}

/* 4. 列（固定幅） */
.seq {
    width: 50px;
}

.fixable {
    width: 400px;
}

/* 5. 列（変動幅） */
.flexible {
    flex: 1;
}


/* スクロール（ヘッダ固定） */

/* 6. スクロール表示 */
tbody {
    height: 150px; 
    overflow-y: scroll;
}

```

# 補足
対象問題の条件を同時に満たさなくていいなら、下記の方法で作成できる。

 - 固定幅の表の一番最後の列だけ変動幅にする
    - 変動幅にしたい列の`width`を設定しない

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="tkrtmy1031" data-slug-hash="KOyrdN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Flexible Table">
  <span>See the Pen <a href="https://codepen.io/tkrtmy1031/pen/KOyrdN/">
  Flexible Table</a> by T.T (<a href="https://codepen.io/tkrtmy1031">@tkrtmy1031</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

 - ヘッダは固定でボディ部だけスクロールする
    - テーブル部品をブロック要素化する（正確にはinline-block）

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="tkrtmy1031" data-slug-hash="RXjedE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Body Scroll">
  <span>See the Pen <a href="https://codepen.io/tkrtmy1031/pen/RXjedE/">
  Body Scroll</a> by T.T (<a href="https://codepen.io/tkrtmy1031">@tkrtmy1031</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



<br/>
<br/>
<br/>

※とはいえ、全く同一の部品を作るのは難しい。用途と工数に応じて的確に使い分けること。