目次

対象問題
課題点
解決策
補足

対象問題

下記条件を同時に満たす表を作成する

固定幅の表の一番最後の列だけ変動幅にする
ヘッダは固定でボディ部だけスクロールする

課題点

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

解決策

テーブル部品をflexbox化する

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

See the Pen flexbox_table by T.T (@tkrtmy1031) on CodePen.

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>

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を設定しない

See the Pen Flexible Table by T.T (@tkrtmy1031) on CodePen.

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

See the Pen Body Scroll by T.T (@tkrtmy1031) on CodePen.

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