※当サイトはリンクに広告ページが含まれている場合があります
以下のような横長の表をウェブサイトに掲載する場合は要注意です。
以下のように、スマホで見ると表がギューっと詰まって見にくくなるサイトってまだまだ結構あります・・・
横長の表をスマホで見やすくするCSSの書き方：data-labelを使うと便利
HTMLで必要な準備は、
- tableにクラスを付与：既存のtableに影響を与えないため
- 見出しの部分にクラスを付与：以下の例では「head」
なお、「data-label」はなくてもレスポンシブ対応できますが、今回、使い方を知って、これは便利、と感じたので併せて紹介しておきます。
デモ画面は以下のとおり。「1x」を押すと、スマホ画面を確認できます。
See the Pen Untitled by abesatoshi (@abesatoshi) on CodePen.
適切なレスポンシブ対応を行うと、以下のようになります。
CSS設定のポイントは、640px以内の画面の場合に、
- headクラスは見えないようにする
- 各セルの横幅を100%にする
だけです。
加えて、消した見出し（headクラス）の文言をdata-labelに設定しておけば、スマホ画面のときラベル的な役割を果たしてくれます。ほんと便利です。
【無料】効率的に人事労務の情報を入手しませんか？
- 毎年のように改正される労働法令への対応に頭を悩ませている
- 総務や経理などの他の業務を兼務しているので、人事労務業務だけに時間を割けない
といった悩みを抱える企業の経営者・人事労務担当者向けに、公開型のブログでは書けない、本音を交えた人事労務に関する情報・ノウハウ、時期的なトピックに関するメールマガジンを「無料」で配信しています。
過去の配信分は公開しません。
情報が必要な方は、いますぐ以下のフォームから購読の登録をしてください。購読して不要と思ったら簡単に解除できますのでご安心ください。