HTMLコーディング

tableをCSSのみでレスポンシブ対応にする方法

テイクフォーにジョインして早3ヶ月が経ちましたがあきらか飲む回数が増えてるともさんですこんにちは。
・・・前はそんな、毎週飲むとか、なかったンデスヨ?

さて、今回はtableをレスポンシブ対応させる方法をメモしておきます。
パターンはいろいろありますが、今回はスマホでレイアウトを変更して一部スクロールさせる方法です。
すぐ忘れてしまうし、ややこしいので・・・

まずはベース

htmlはこちら。
ごくごく普通のtableコーディング。

<table>
<thead>
<tr>
<th>精米率(精米歩合)</th>
<th>精米規制なし</th>
<th>70%以上精米規制あり</th>
<th>60%以下</th>
<th>50%以下</th>
<th>35%以下</th>
</tr>
</thead>
<tbody>
<tr>
<th>アルコール添加あり</th>
<td> </td>
<td>本醸造酒</td>
<td>吟醸酒 特別本醸造酒</td>
<td>大吟醸酒</td>
<td>品評会レベル</td>
</tr>
<tr>
<th>アルコール添加なし</th>
<td>純米酒</td>
<td> </td>
<td>純米吟醸酒 特別純米酒</td>
<td>純米大吟醸酒</td>
<td>品評会レベル</td>
</tr>
</tbody>
</table>

CSSはこちら。
こっちも特に奇抜なところはないと思います。

table {
width: 100%;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-collapse: collapse;
border-spacing: 0;
}

th,
td {
width: 16.6%;
padding: 0.6em 1em;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

thead th {
background: #eee;
}

tbody th {
background: #fee8e7;
}

@media screen and (max-width:640px) {
/* ここにスマホでのスタイルを指定する */
}

ブラウザで見るとこうなります。

tomo_01

これがベースとなります。
メディアクエリのブレイクポイントは640です。

まずは縦並びにする

thとtdを縦並びにします。

th,
td {
display: block;
width: auto;
}

display:block;であらふしぎ。
縦並びになるんですねー。

tr、thead、tbodyを横並びに

tr、thead、tbodyを横並びにします。

table {
display: flex;
}

tbody tr {
display: inline-block;
}

tbody tr:last-child {
margin-left: -5px;
}

theadとtbodyを横並びにするためにdisplay:flex;を使用します。

trを横並びにするためにはdisplay:inline-block;を使用しますが、display:inline-block;を使用すると隙間ができてしまうのでmargin-leftで調整を入れます。
この数値は文字の大きさによって変わってくるので、都度調整が必要です。
今回はmargin-left: -5px;を指定しました。

trのカラム落ちを防ぐ

上記で設定したtrへのdisplay:inline-block;ですが、横幅の合計がブラウザの横幅を超えてしまうとカラム落ちします。
まあたいへん。

というわけで、カラム落ちしないように指定を追加します。

thead {
white-space: nowrap;
}

tbody {
overflow-x: scroll;
white-space: nowrap;
}

thead、tbodyのwhite-space: nowrap;で、自動的な折り返しをなくします。

tbodyにはさらにoverflow-x: scroll;で、はみ出た部分について横並びを保ちながらスクロールできるようになります。

結果、以下のような表示になります。
tomo_02

codepenで、すべての指定をしたものを載せておきます。
いろいろいじってみてください。

横幅縮めたりすれば、縦並びになっているのが体感できると思います。

See the Pen tableレスポンシブ対応 by tomosan (@tomosan) on CodePen.0

まとめ

tableでレスポンシブ対応するのはなかなかに面倒ですねえ。
できればやりたくなくて、いつもdlで組んでしまったりします。

でもやらなきゃなんないときもあるわけで。
手のかかるヤツです。

社内では体調不良でダウンする人が続出する中、体調不良なんて言葉とは無縁の私はなかなか図太い神経しとるなと思うともさんでした。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. HTMLコーディング

    棒グラフをcssで表現してみよう

    何かおいしい日本酒銘柄があれば教えて欲しいと思っている、ともさんです。ちなみに、私のおすすめは「美少年」です。先日の案件で、サイト内に棒グ…

  2. HTMLコーディング

    【PHP】ページ毎に表示を変えるサイドメニューの分岐の方法

    先日会社の人たちと初登山へ行ってきましたが3回ほど盛大にコケてオシリが痛くなったともさんです、こんにちわ。・・・いや、登山楽しかったですよ。次回は…

  3. HTMLコーディング

    社内勉強会を行いました。

    こんにちわ、入社2ヶ月のともさんです。さて、去る9月16日(金)19:00~社内勉強会を行いました。テイクフォーでは初の勉強会となります。…

  4. HTMLコーディング

    cssでグラデーションを描いてみよう

    年末に向けていろいろと身辺周りが慌ただしくなってきましたね。こんにちは、ともさんです( ^ω^ )グラデーションをcssで描けることはもう…

  5. HTMLコーディング

    とっても簡単なベーシック認証(Basic認証)のかけ方

    日本酒のひやおろしがおいしい季節になりました、お久しぶりですこんにちわ。ともさんです。久しぶりに業務でベーシック認証(Basic認証)をか…

  6. HTMLコーディング

    最近流行りの静的サイトジェネレータについて掘り下げてみる【Movable Type編】

    最近、耳をふさがないイヤホンを見つけて衝動買いしてしまったワタクシ、ともさんです。こんにちわ。Bluetoothではないのに、まあまあ高め…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WEBデザイン

    Photoshopでオシャレなネオンサインのような文字を作る方法
  2. お知らせ

    2016年もWEBデザイナーを募集しています。
  3. HTMLコーディング

    【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう
  4. Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    WEBデザイン

    Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法
  5. HTMLコーディング

    EC-CUBE3でテンプレート適用後にパスが通らなくなってしまったときの対処法
PAGE TOP