問題 × 解決策

tableをPCは横向き、スマートフォンは縦向きにする方法

問題

tableをPCは横向き、スマートフォンは縦向きにするには?

解決策

スマートフォンを前提にしたtableレイアウトに組んでおき、PC時にtrのdisplayを「table-cell」に、各セルのdisplayを「block」にして、高さを揃える。

 

tableの向きを変える手法

tableのレスポンシブ対応は列が多ければ多いほど難しくなります。
今回はtableをレスポンシブ対応にする方法の1つとして、tableをPCは横向き、スマートフォンは縦向きにする方法をご紹介します。

DEMOはこちら

  項目A 項目B
月曜日 内容
内容
内容
火曜日 内容 内容
水曜日 内容 内容
内容
木曜日 内容
内容
内容
金曜日 内容 内容
土曜日 内容 内容

HTMLはこちら

<table class="tablematch">
    <tbody>
        <tr>
            <th><span><span>&nbsp;</span></span></th>
            <th><span><span>項目A</span></span></th>
            <th><span><span>項目B</span></span></th>
        </tr>
        <tr>
            <th><span><span>月曜日</span></span></th>
            <td>内容<br>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <th><span><span>火曜日</span></span></th>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <th><span><span>水曜日</span></span></th>
            <td>内容</td>
            <td>内容<br>内容</td>
        </tr>
        <tr>
            <th><span><span>木曜日</span></span></th>
            <td>内容<br>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <th><span><span>金曜日</span></span></th>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <th><span><span>土曜日</span></span></th>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </tbody>
</table>

ポイント!

スマートフォン想定のtableレイアウトで構築します。

CSSはこちら

@media print, all and (min-width: 768px) {
	table.tablematch{
		width: 100%;
		table-layout: fixed;
	}
	table.tablematch tr {
		display: table-cell;
		vertical-align: top;
	}
	table.tablematch th,
	table.tablematch td {
		border-collapse: collapse;
		display: block;
		border: 1px solid #ffffff;
	}
	table.tablematch th{
		vertical-align: middle;
		padding: 5px;
		background-color: #FCECE8;
		text-align: center;
	}
	table.tablematch td {
		vertical-align: top;
		padding: 5px;
		background-color: #fcf5e8;
	}
	table.tablematch th > span{
		display: table;
		width: 100%;
		height: 100%;
	}
	table.tablematch th > span > span{
		display: table-cell;
		vertical-align: middle;
	}
}
@media only screen and (max-width: 767px) {
	table.tablematch{
		width: 100%;
		table-layout: fixed;
	}
	table.tablematch th,
	table.tablematch td {
		border-collapse: collapse;
		font-size: 85.7142%;
		border: 1px solid #ffffff;
	}
	table.tablematch th{
		vertical-align: middle;
		padding: 5px;
		background-color: #FCECE8;
		text-align: center;
	}
	table.tablematch td {
		vertical-align: top;
		padding: 5px;
		background-color: #fcf5e8;
	}
}

ポイント!

PC時にtrのdisplayを「table-cell」に、各セルのdisplayを「block」にします。

Javascriptはこちら

var w = $(window).width();
function tableswitch(){
    if($('table.tablematch').length){
        $('table.tablematch').each(function(index, element) {
            var maxheight = 0;
            // 各セルごとに処理(3列想定[1~3])
            for(var i = 1; i<4; i++){
                $(this).find('tr > *:nth-child('+i+')').each(function(index, element) {
                    // javascriptで設定したスタイルをリセット
                    $(this).removeAttr('style');
                    // PCの場合
                    if($(window).width() > 767){
                        // 行ごとにセルを一通り参照し、一番高さのあるセルの値を取得する(変数[maxheight]に値を格納)
                        if(maxheight <= $(this).height()){
                            maxheight = $(this).height();
                            maxheight = Math.ceil(maxheight);
                        };
                    }
                });
                if($(window).width() > 767){
                    // 行ごとの全てのセルに一番高いセルの高さを適用させる
                    $(this).find('tr > *:nth-child('+i+')').css('height',maxheight+"px");
                }
            };
        });
    };
}
tableswitch();
$(window).resize(function(){
    // PCとスマートフォンが切り替わったら
    if (w > 767 && $(window).width() <= 767 ) {
        tableswitch();
    }
    if (w <= 767 && $(window).width() > 767 ) {
        tableswitch();
    }
    w = $(window).width();
});

ポイント!

各trタグ内の1番目、2番目、3番目…のセルに対して、一番高いセルの高さに合わせます

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

two × two =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧