※当サイトはリンクに広告ページが含まれている場合があります
以下のような横長の表をウェブサイトに掲載する場合は要注意です。
以下のように、スマホで見ると表がギューっと詰まって見にくくなるサイトってまだまだ結構あります・・・
横長の表をスマホで見やすくする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に設定しておけば、スマホ画面のときラベル的な役割を果たしてくれます。ほんと便利です。
あなたのご質問・ご相談に、月1回、無料・本音で回答します。
ご質問・ご相談は、登録後に届くメールから送っていただけます。費用は一切かかりません。「お悩み相談室」というクローズドな場だからこそ、踏み込んだ内容の質問にも回答できます。
これまでに、こんなご質問・ご相談に回答してきました。
- コンサル(3号業務)を主力業務にするには、どうすれば良いか？
- どのようにして顧問料を上げれば良いか？
- 営業が苦手で、新規の顧客獲得ができない
- 業務をどう絞り込めば良いか？
- 一人社労士のままで良いのか、人を雇うべきか？
- 苦手・相性の悪い顧問先と、どう付き合うか？
- 生成AIの時代、社労士は今後どう生き残るか？
なぜ、無料で同業の社労士からの相談に乗るのか？
それは「本当に顧客のために活動できる社労士仲間を増やしたい」からです。
私自身、社労士という資格に誇りを持っています。企業からの社労士に対する不満をよく聞きますし、「社労士なんて役に立たない」と思われることは、正直悔しいです。
- 信頼される・信頼できる社労士の仲間を増やしていきたい
そんな想いから、少しでも社労士業界全体のレベルアップに貢献できればと考えています。
登録は無料・月1回配信・配信解除いつでも可能
※ 登録後、本人確認のメールをお送りします。届かない場合は迷惑メールフォルダもご確認ください。