フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【HTML/CSS】tableタグのセルの幅を均等に揃える方法

css
HTML
table
均等

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

tableタグのセルの幅は文字量によって自動で設定されます。
あまりにもセルの幅に差が出てしまうと見栄えは悪くなってしまいます。
この記事ではtableタグのセルの幅を均等に揃える方法をご紹介したいと思います。

tableタグのセルの幅を均等に揃える方法

tableタグのセルの幅はそのセル内の文字量に応じて自動で設定されます。
以下が文字量が異なる場合のサンプルです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

このようにセルの文字量に応じて幅が自動で設定されるため改行は発生しにくいですが、
見栄えの観点から見るとセルの幅は均等に揃っていた方が整っている印象を受けると思います。

そこでセルの文字量に関わらず、各セルの幅を均等に揃えるにはtableタグのCSSに以下の指定を追加します。

table{
    table-layout: fixed; /* セルの幅を均等にする */
}

この指定を追加するだけで文字量にかかわらずセルの幅は均等に揃えることが出来ます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

セルの幅が均等になると見栄えが良くなりますね。

まとめ

いかがでしたか?
tableタグのセルの幅を均等に揃える方法をご紹介しました。
セルの幅は必ずしも揃っていた方が綺麗というわけではないため、その状況状況に応じて設定していきたいですね。