【materializecss】tableのヘッダーを固定する

概要

materializecssのTableのヘッダ固定がデフォルトのオプションになく、かつ項目の幅の比率を同じにしたままで固定する方法が調べてもあまり出て来なかったので記します。

環境

materializecss 1.0.0

原因

ここら辺は調べたらすぐ出てくるんだけども念のため

.table {
    max-height: 500px;
    overflow-y: scroll;
}

overflowプロパティは

置換されていないブロックレベル要素、および、置換されていないインラインブロック要素

が対象なのでtableタグに直接指定してもoverflowされない。

対処法

ヘッダとボディで分けたtableを作り、ボディ側のtableをdivで囲む

<table>
    <thead>
        <tr>
            <th style="width: 60%;">columnName</th>
            <th style="width: 20%;">columnName</th>
            <th style="width: 20%;">columnName</th>
        </tr>
    </thead>
</table>

<!-- NOTE: このdivにoverflowを当てる -->
<div class="table-body">
    <table>
        <tbody>
            <tr>
　　　　　　　　　 <!-- NOTE: ヘッダと同じ比率のwidthにする -->
                <td style="width: 60%;">value</td>
                <td style="width: 20%;">value</td>
                <td style="width: 20%;">value</td>
            </tr>
        </tbody>
    </table>
</div>

.table-body {
    max-height: 500px;
    overflow-y: scroll;
}