工藤コピペ可!CSSだけでレスポンシブテーブルをつくろうマークアップfacebooktwitterこんにちは工藤です。今回はレスポンシブのテーブルの組み方の1例をご紹介します。PC表示の時はこんな感じです。今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。スマートフォン表示の時tbody内のtdの箇所に、theadの項目を表示させてみました。ソースは下記のようになります。これで長くなった時に対応できます。/>これで長くなった時に対応できます。{padding-left:6em;}}DEMOポイントレスポンシブ時にtheadは非表示にします。tbody内thとtdはブロック要素にして、幅を100%に設定します。これでそれぞれ横に広がった状態になります。theadを非表示にした代わりに、今回はtbody内tdにlabelで設定したtheadの項目名をcontentを使って表示させます。:first-child等を使ってcontentに直接項目名を入れてもいいと思うのですが、時と場合によるかと思うのでその時は適宜調整してください。tdの中のテキストはブロック要素にするため今回はpタグで括っておきます。contentをfloatさせておくので、pタグはpaddingで文字数+隙間分設定します。これで文字数が多い時にでも対応できるレスポンシブのテーブルが完成します。テーブル内でpタグで括るのが煩わしければ、contentをブロック要素にして改行して表示させるのもありだと思います。(というかスマホの表示領域を考えるとその方がよいかも)割と簡単にできるので、どうぞ試してみてください。同様の内容を、動画でご覧になれます。最近はWordPressを触るのが好きです。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。(エイトビット)東京都目黒区でWebサイト制作、Webシステム開発などを行っております。コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。見積りシミュレーションをご用意いたしました。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。WordPressでも利用することは可能ですが、WordPressはセッション関数を推奨していません。