ウェブのあれこれ
ウェブを活用したいひとのためのブログ
単純なテーブルを簡単にレスポンシブで表示する方法
2016/03/14 HTML/CSS

単純なテーブルを簡単にレスポンシブで表示する方法

tableタグで表組みを記述することはよくあるのと思うのですが、レスポンシブデザインで表組みが出てくると画面幅を狭めた際に表の幅が狭まり過ぎて表示が崩れてしまうことありませんか?

単純な表組みならtableタグのスタイルでレスポンシブ化!

表組みで一番単純のは左に項目名、右に項目内容のような左右にカラムが割れているパターンですね。
このパターンの場合は各セルなどの要素をブロック要素にするだけで、単純にレスポンシブ化することができます。

また、どうしても横幅が必要なテーブルなどは無理にレスポンシブ化するよりも、画面幅が狭い時には横スクロールさせてしまうほうが見やすいです。

今回は単純なレスポンシブ化の方法を2つ紹介します。

サンプルはこちら

左右に積まれた要素をすべて縦積みに

@media screen and (max-width: 640px)
{
    table.mobile-convert,
    table.mobile-convert tbody,
    table.mobile-convert thead,
    table.mobile-convert tr,
    table.mobile-convert tr th,
    table.mobile-convert tr td
    {
        display:block;
    }
    table.mobile-convert tr th
    {
        text-align:left;
    }
}

上記では一番キモとなる各要素のブロック要素化を指定しています。
table,tr,th,tdはもちろんですが、省略可能なthead,tbody要素に関しても、レンダリング時にブラウザが内部で補完しているケースが多く、
ちゃんとスタイルを指定しないと表示が崩れてしまうことがあります。

幅があふれることを前提にして左右にスクロールさせる

@media screen and (max-width: 640px)
{
    .scroll-table-wrapper:before,
    .scroll-table-wrapper:after
    {
        display:inline-block;
        width:100%;
        content:'← SCROLL →';
        font-weight:bold;
        color:#FF3333;
        text-align:center;
    }

    .scroll-table-wrapper .scroll-table-container
    {
        overflow-x:scroll;
    }
    .scroll-table-wrapper .scroll-table-container table.scroll-table
    {
        width:740px;
    }
}

幅があふれた時にスクロールさせるためには、テーブル要素をdivタグで囲む必要があります。
上記の例では、「scroll-table-wrapper」でテーブルの上下にスクロールの表示、「scroll-table-container」で「overflow-x:scroll」とすることで横に長いデーブルが要素をはみ出した時にスクロールで表示するように設定しています。
そして、テーブル要素自体には横幅を指定します。この横幅はテーブルのレイアウトが崩れない横幅を指定しましょう。

背景色、ボーダー、角丸などは要調整

レスポンシブデザインのサイトではテーブル要素が地味に厄介ですが、上記のように単純にレスポンシブ化を行うこともできます。ただし、テーブルは利用箇所によってレイアウトや目的が異なってくるので、レスポンシブ化してもちゃんと意味が通るようにデザインしましょう!

上記指定はブロック要素化だけなので、デザイン上ボーダーや角丸なんかを当てている場合はその辺りの調整も必要です!その他にテーブルデザインでよくあるのはセルのpaddingやtext-alignなどでしょうか。

左右でに積まれて表示される場合と、すべて縦積みで表示される場合ではレイアウトが全然違うので細かな調整はいろいろと必要ですが、内容を2重に書いて切り替えたりなどは必要ないのでHTML構成はシンプルになりますね。
Provided by Revolme inc.
revolme.co.jp