ご無沙汰してます、津山です。

tableのレスポンシブ化に関する情報はたくさんあるのですが、業務システムのマスタ画面で使用するようなテーブルのレスポンシブ化についてはなかなか見つからないな…と思ったので書き留めておきます。

要するに、

こんなテーブルを…

↓

スマホ時にこうしたいときのお話です。

tableのレスポンシブ化としてよく紹介されているのが、

「スマホ時にtheadとtbodyをブロック要素にして横並びにする」方法

…ですが、この方法は中身の文字数などのデータが固定されている場合にしか使えないので、データが増減するマスタテーブルには向いていません。

中身が変化してしまう以上、別の方法を取らなくてはなりません。

考え方としては、

テーブルのtd要素内にdiv要素を作り、そのdiv要素をテーブルの要素に見立てる。

ポイントは、

上記画像のdiv要素に指定されているクラス、

res-tblにdisplay:table;

res-tbl-cell にdisplay:table-cell;を指定すること。

つまり、sm-headの部分がテーブルでいうとthの役割を果たし、sm-bodyの部分がテーブルでいうとtdの役割を果たすようなイメージです。

tableの構造上、スマホ時にもtheadを項目名として使用することは不可能なため、sm-headをPC時に隠しスマホ時に表示させることでそれっぽく見せることができます。

CSSは以下の通り。

/* テーブルのth・td要素のpaddingは0にしておく*/
.responsive tbody th, .responsive tbody td {
    padding:0!important;
}
/* display:table部分 */
.responsive .res-tbl {
    width:100%;
    display:table!important;
}
/* display:table-cell部分 */
.responsive .res-tbl-cell {
    padding:.6rem;
    display:table-cell!important;
}
/* スマホ */
@media screen and (max-width:767px){
    /* td, thにあたる部分をblock要素に */
    .responsive td, .responsive th {
        display:block;
    }
    /* スマホ時のth部分のカラー */
    .sm-head {
        background-color:#333 !important;
        color:#fff;
    }
    /* スマホ時、theadは隠す */
    .responsive thead {
        display:none!important;
    }
    /* th に当たる部分　*/
    .responsive .sm-head {
        width:25%;
        text-align: left;
        vertical-align: top;
    }
    /* td に当たる部分　*/
    .responsive .sm-body {
        width:75%;
    }
}
/* PC */
@media screen and (min-width:768px){
    .responsive .sm-head {
        display:none!important;
    }
}

どうしても階層が複雑になってしまうのが難点ですが、今のところ私が思いつく限りではこの方法が最もシンプルにテーブルをレスポンシブ化できる方法かなと思います。

（もっと簡単な方法があれば知りたいです…）