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コーディング

    【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう

    皆様あけおめです。ともさんです。あけおめ・・・もう2月ですよ。どうしましょう。なにをしてたんでしょうか。というわけで、今回もはりきってゴー…

  2. HTMLコーディング

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

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

  3. HTMLコーディング

    EC-CUBE3で自動返信メールが文字化けし、そしてタイトルが途中で切れたときの対処法

    大阪はすっきりしない天気が続いてロードバイクに乗れずテンション下がりまくりのともさんですこんにちは。さて、前回に引き続き今回もEC-CUBE関…

  4. HTMLコーディング

    【WordPressでGO!】WordPressをローカル環境へインストールしてみよう

    あけましておめでとうございます。今年もよろしくお願いいたします。2018年一発目の記事は、WordPressです(≧▽≦)WordPr…

  5. HTMLコーディング

    高機能で簡単!レスポンシブ対応のjQueryスライダー「bxSlider」を設置してみよう

    もう年の瀬ですね。当社の営業日も実質今日で終わりです。あとは大掃除を残すのみ(/・ω・)/そんな中でのこんなブログ記事です。仕事熱…

  6. HTMLコーディング

    ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム風にできるcss

    こんにちは、ほぼ毎日朝7時からジムに通ってます。徳永です。今更ながらあけましておめでとうございます。作業がひと段落したので重い腰を上げて201…

コメント

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

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

CAPTCHA


最近の記事

  1. Yahoo!タグマネージャーを導入してみよう

    WEB集客

    Yahoo!タグマネージャーを導入してみよう
  2. HTMLコーディング

    棒グラフをcssで表現してみよう
  3. レポート

    水彩画の描き方を教えます!(その1)
  4. WEBデザイン

    WordPressを日本語化させよう!WP Multibyte Patchって?…
  5. WEB集客

    「Googleトレンド」を使いこなして人気のキーワードと流行を把握しよう
PAGE TOP