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

RELEASE / 2024.5.14 UPDATE / 2024.05.14

css

HTML

table

均等

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