Web制作タクヤtable要素をスマートフォン画面の幅に合わせる時に使うCSSWebサイト・ブログをスマートフォン対応するとき、なかなか、うまく表示されなくて困るのが、「table(テーブル)」だと思います。「tableが画面からはみ出す」「table内の文字が重なる」ときです。このページでは、スマートフォン対応するときに、table周りで使用するCSSについて、まとめています。次のtableがうまく表示されないとき、どのようにCSSを変更すれば解決できるのか解説します。fixed;」をCSSで指定すれば解決できます。/*追加する*/}※「table-layout」は、tableの表示方法を指定するときに使用します。今回は、tableの列幅を均等にする「fixed」という表示方法を指定しています。指定後tableがスマートフォンの画面サイズに合わせて表示されるようになりました。(このとき、tableに「width:100%;」をCSSで指定するのを忘れないでください。break-word;」をCSSで指定すれば解決できます。/*追加する*/}※「word-break」は、tableの行の改行方法を指定するときに使用します。今回は、文字を行から、はみださないように制御する「break-word」を指定しています。break-word;」の3つをCSSで指定すれば、多くの場合、うまく表示されるようになります。tableがなかなかうまく表示されなくて困っているという方は、是非、試してください。スポンサードリンクWeb制作CSSスマートフォンこの記事が気に入ったらいいねしよう!最新記事をお届けします。PMコメントありがとうございます^^お役に立てて良かったです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。RECOMMENDこちらの記事も人気です。2019.8.10楽天ペイをキャンペーンでお得に始める方法!最大1,000ポイント還元ABOUTこの記事をかいた人タクヤサラリーマンをしながら、当ブログを運営していましたが、2018年に独立し現在はフリーランスとして活動しています。今まで、数々のWebサイト・ブログを構築してきました。このブログでは、今までの経験で得た知識を活かし、Web制作・SEO関連を中心に、最新のIT関連ニュースを発信。ファイナンシャル・プランナー技能士の資格を活かして金融関係の情報も発信しています。